Skip to content

Custom Elements

We can add the simple declarative custom elements with _spy.ensureCustomElement().

js
_spy.ensureCustomElement(
  "my-element",
  {
    templateHtml: `
    <div>
      <span :value="name"></span>
      <p :value="message"></p>
    </div>
    <style>
    div {
      background: yellow;
      color: red;
      span {
        background: green;
        color: blue;
      }
    }
    :host(.gray) {
      div {
        background: gray;
      }
    }
    </style>
    `,
  },
);
html
<my-element name="alice" message="hit is a test"></my-element>
<my-element class="gray" name="bob" message="hello world"></my-element>

:value attribute in template HTML

The attribute named :value indicates a reactive text content property.

js
_spy.ensureCustomElement(
  "just-div",
  {
    templateHtml: `<div :value="some"></div>`,
  },
);

<just-div some="thing"></just-div> will render <div>thing</div> in the custom elemnet.

And we can change the value via boundData property of them.

js
document.querySelector("just-div").boundData.some = "other";

@[event] attribute in template HTML

The attribute that name starts with @ will invoke the handler.

js
_spy.ensureCustomElement(
  "my-form",
  {
    templateHtml: `
      <div>
        <button type="button" @click="work">
          click me
        </button>
      </div>
    `,
    eventHandlers: {
      work(e) {
        console.log(e.target.textContent);
      },
    },
  },
);