Author web components, declaratively
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
LICENSE
README.md
elements.js
tests.js

README.md

Author web components, declaratively

Custom elements and shadow DOM should be declarative. Unfortunately, both APIs are JavaScript-based.

This repo shows how to define two custom elements, <shadow-root> and <custom-element-definition> which can be used to declaratively author a web component. Custom elements should be declarative

See demo for full examples and live demos.

Examples

Example - <shadow-root> tag

<div id="shadow-host">
  <b slot="name">Eric's</b>
  <shadow-root>
    <template>
      <slot name="name"></slot> declarative shadow dom!
    </template>
  </shadow-root>
</div>

What this does:

  • Creates Shadow DOM from a child <template> and attaches the shadow root to the parent element. In this example, <div id="shadow-host">.

Example - <custom-element-definition> tag:

<custom-element-definition name="basic-element">
  <template>
    <span>content appended by element's author (in light dom)</span>
  </template>
</custom-element-definition>

What this does:

  • Element does not use Shadow DOM
  • Element does not register itself. The page should called customElements.define('basic-element').

Example - <custom-element-definition> with styles

<custom-element-definition name="basic-element-styles">
  <template>
    <style>
      /* CSS selectors are prefixed/scoped b/c we're not using shadow dom. */
      basic-element h2 {
        color: blue
      }
    </style>
    <h2>basic-element: some content should be blue</h2>
  </template>
</custom-element-definition>

What this does:

  • Element does not use Shadow DOM
  • Element does not register itself. The page should called customElements.define('basic-element-styles').
  • Element defines styles for its light dom.

Example - <custom-element-definition> that uses shadow dom and registers itself

<custom-element-definition name="my-element">
  <shadow-root>
    <template>
      <style>
        :host {
          display: block;
          color: red;
        }
        ::slotted(span) {
          color: blue;
        }
      </style>
      <div>
        <b>click me (in shadow dom)</b><br>
        <slot></slot>
      </div>
    </template>
  </shadow-root>
  <script>
    (class extends HTMLElement {
      constructor() {
        super();
        this.addEventListener('click', this.sayHi);
      }
      sayHi() {
        alert('Hi!');
      }
    })
  </script>
</custom-element-definition>

What this does:

  • Element uses Shadow DOM
  • Element auto-registers itself when defining a script in <custom-element-definition>.