Re: [whatwg/dom] Declarative Shadow DOM (#831)

I think we got a declarativ shadowroot already via the script tag :)

https://dev.to/frankdspeed/the-html-component-pattern-hcp-3pkp

```html
<host-element>
    <template shadowroot="open">
        <style>shadow styles</style>
        <h2>Shadow Content</h2>
        <slot></slot>
    </template>
    <script defer>
    // Hydrate
    const template = document.currentScript.previousElementSibling;
    const customElement = document.currentScript.parentElement;
    const shadow = customElement
      .attachShadow({mode: 'open'})
      .appendChild(template.content.cloneNode(true));
    </script>
    <h2>Light content</h2>
</host-element>

<!-- would be parsed into this DOM tree: -->

<host-element>
  #shadow-root (open)
    <style>shadow styles</style>
    <h2>Shadow Content</h2>
    <slot>
        ↳ <h2> reveal
    </slot>
  <h2>Light content</h2>
</host-element>
</html>
``` 

here a codepen: https://codepen.io/frank-dspeed/pen/XWKrezW?editors=1011


and while that looks complex for novice developers we could wrap that into a helper util function like

```html
    <script defer>
    // Hydrate
      const declareShadowDom = declareIngEl=>{
        const template = document.currentScript.previousElementSibling;
        const customElement = document.currentScript.parentElement;
        const shadow = customElement
            .attachShadow({mode: 'open'})
            .appendChild(template.content.cloneNode(true));
      }
    declareShadowDom(document.currentScript)
    
    </script>
``` 

i hope you get the idea i think this is declarative the declareShadowDom can also come from a file so it gets a single like script

```html
<script src="modules/declare-shadowdom.js" defer><script>
``` 

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/831#issuecomment-703981869