Declarative Shadow DOM


#21

Thinking about it some more it, the current experiment I wrote requires storing an arbitrary property on the element so that they can check for it before using attachShadow.

It would be good if a builtin solution were to simply return the pre-rendered shadow root from attachShadow rather than failing as a shadow root is already attached e.g. given this code:

<template id="blah">
  <div>Some content</div>
</template>

<my-element
  prerender-template-id="blah"
  prerender-shadow-mode="closed"
></my-element>

when calling attachShadow we would just return the pre-rendered shadow root:

class MyElement extends HTMLElement {
  #shadowRoot
  constructor() {
    super()
    // This will already be populated with
    // <div>Some content</div>
    this.#shadowRoot = this.attachShadow({ mode: 'closed' })
  }
}