Template View

We can add a template-view with _spy.customElement.ensureTemplateView().

_spy.customElement.ensureTemplateView();

or, execute from CDN

js file for just template-view will be delivered too, since v0.32.0.
loading script from CDN will automatically execute ensureTemplateView().
and it's only for template-view so that window will not have _spy for that case.

<script src="https://cdn.jsdelivr.net/npm/u-spy/dist/template-view.global.js"></script>

<template-view id="my-template-view">
  <div class="my-element" :text="name"></div>
  <style>
    .my-element {
      color: blue;
    }
  </style>
</template-view>
<script>
  document
    .querySelector("#my-template-view")
    .item = {
      name: "alice",
    };
</script>

directives

the available directives are below.

	example	description
:if	<div :if="name">	renders if the value of property is truthy
:if-not	<div :if-not="name">	renders if the value of property is falsy
:if-equal	<div :if="name" :equal-value="Alice">	renders if the value of property is equal to expected value
:if-not-equal	<div :if-not-equal="name" :equal-value="Alice">	renders if the value of property is not equal to expected value
:text	<div :text="name">	renders the value of property as textContent
:value	<input :value="name">	sets the value of property as value
:src	<img :src="imageUrl" />	sets the value of property as src
:for	<li :for="items"><div :text="name"></div></li>	renders the items of the array
@[event]	<button @click="onClick"></button>	registers the event handler in eventHandlers of template-view
:class	<div :class="{ red: isRed, blue: isBlue }">	adds some classes