tomalec / declarative-shadow-dom-proposal Goto Github PK

One of the major uses of declarative shadow DOM is pre-rendering, however as proposed this forces custom element authors to always use open Shadow DOMs if they want to be able to pre-render.

I would propose one of a couple things:

1. return the Shadow DOM created from <shadowroot> when calling .attachShadow() once
2. add another attribute that stores the ShadowRoot that exposes the shadow root as some property on the element, a consumer could then just delete this property (e.g. this.#shadowRoot = this.declarativeShadowRoot; delete this.declarativeShadowRoot)
3. some combination of the above, e.g. have a new function .getDeclarativeShadowRoot() that returns the ShadowRoot exactly once, then a consumer can just do: this.getDeclarativeShadowRoot() || this.attachShadow({ mode: 'closed' })

Example of 1.:

<my-element>
  <shadowroot mode="closed">
    Hello from shadow DOM
  </shadowroot>
</my-element>

class MyElement extends HTMLElement {
  #shadowRoot
  constructor() {
    // works even if <shadowroot> pre-added the shadow root
    this.#shadowRoot = this.attachShadow({ mode: 'closed' })
  }
}

Example of 2.

<my-element>
  <shadowroot mode="closed" attachproperty>
    Hello from shadow DOM
  </shadowroot>
</my-element>

class MyElement extends HTMLElement {
  #shadowRoot
  constructor() {
    this.#shadowRoot = this.declarativeShadowRoot || this.attachShadow({ mode: 'closed' })
    delete this.declarativeShadowRoot
  }
}

Example of 3.

<my-element>
  <shadowroot mode="closed" available>
    Hello from shadow DOM
  </shadowroot>
</my-element>

class MyElement extends HTMLElement {
  #shadowRoot
  constructor() {
    this.#shadowRoot = this.getDeclarativeShadowRoot() || this.attachShadow({ mode: 'closed' })
    // this.getDeclarativeShadowRoot() would now return null
  }
}

When you are defining a custom element, you usually would like to define some behavior and interaction, therefore you need scripting anyways.

Actually my primary use case is just to put a div (like in https://www.w3.org/TR/2007/CR-xbl-20070316/#the-div, mysteriously dropped from the final W3C Note of XBL2, so I guess we'll have to live with using just divs in the HTML namespace) around an element for styling (it's often needed and the proposals for things like ::outside in CSS didn't pan out) without sacrificing semantic structure of the document. So no scripting. Declarative bindings were supported throughout the drafts of 2000s and then, it seems, the raising enmity at the time towards declarative solutions took over.