[WICG/webcomponents] Nested webcomponent loading error (Issue #980)

I found a strange behaviour within the webcomponent. If one component is included in another, the child component will only be recognised when the parent is added to the main DOM. Does it make sense to have the webcomponent transformation as soon as it is added to a shadowroot?

Here is an example of the problem

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        class ComponentContainer extends HTMLElement {
            constructor() {
                super();
                let tmpl = document.createElement('template');
                tmpl.innerHTML = `<my-child></my-child>`;
                let shadowRoot = this.attachShadow({ mode: 'open' });
                // the problem is here
                shadowRoot.appendChild(tmpl.content.cloneNode(true));
                // if you replace the line above by the line the code will work
                // shadowRoot.appendChild(new ComponentChild());
            }
            connectedCallback() {
                let child = this.shadowRoot.querySelector("my-child");
                setInterval(() => {
                    child.active = !child.active;
                }, 1000)
            }
        }
        customElements.define("my-container", ComponentContainer)

        class ComponentChild extends HTMLElement {
            static get observedAttributes() {
                return ["active"];
            }
            get 'active'() {
                return this.hasAttribute('active');
            }
            set 'active'(val) {
                if (val) {
                    this.setAttribute('active', 'true');
                } else {
                    this.removeAttribute('active');
                }
            }

            constructor() {
                super();
                let tmpl = document.createElement('template');
                tmpl.innerHTML = `<style>:host{color:red}:host([active]){color:green}</style><h1>Title</h1>`;
                let shadowRoot = this.attachShadow({ mode: 'open' });
                shadowRoot.appendChild(tmpl.content.cloneNode(true));
            }
        }
        customElements.define("my-child", ComponentChild)

        document.addEventListener("DOMContentLoaded", () => {
            let containerError = new ComponentContainer();
            let childError = containerError.shadowRoot.querySelector("my-child");
            childError.active = true;
            document.body.appendChild(containerError);

            let containerValid = new ComponentContainer();
            document.body.appendChild(containerValid);
            let childValid = containerValid.shadowRoot.querySelector("my-child");
            childValid.active = true;
        })
    </script>
</head>

<body>
</body>

</html>
```

Currently the only way to get an equivalent result for the 2 codes is to manually create the child component with new ComponentChild() in the constructor then add it to the shadowRoot.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/980
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/980@github.com>

Received on Saturday, 17 December 2022 09:55:30 UTC