Declarative Shadow DOM


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>


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

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