[declarative-custom-elements] POC in shadow-dom-element

[sashafirsov]

DCE standard proposal is not yet shaped and what is on proposal is far from Declarative Web Application which should be functional without JavaScript.

<shadow-dom-element> has all means for defining the DCE except of tag name.

Proposed syntax

<shadow-dom-element tag="my-component" code="template.html" ></shadow-dom-element>
<my-component>rendered by <b slot="link-title">template.html</b></my-component>

Note that src attribute and payload is missing which along with assigned tag would omit the inline UI generation and instead declare custom element. In given sample both lines would produce same DOM:

<shadow-dom-element tag="my-component" code="template.html" >ABC</shadow-dom-element>
<my-component>ABC</my-component>

inline payload

When both payload (via src or DOM) and tag is provided, the component would be rendered inline as a tag.

light-dom-element

would inherit this behavior enabling DCE without shadow root

Links

• strawman
• shorter syntax proposal
• how would SSR work?
• progressive-hydration conditions for first level hydration timing