Declarative ShadowDOM does not work as shown in Docs

[rossanmol]

Describe the bug
I have copied the code written in your Docs, in Node 14/16/18. And the output was:

                <my-custom-element><template shadowroot="open">
                            <style>
                                :host {
                                    display: inline-block;
                                    background: red;
                                }
                            </style>
                            <div><slot></slot></div>
                        </template></my-custom-element>

To Reproduce
Steps to reproduce the behavior:

1. Copy code from Docs
2. Execute code in node (14/16/18)
3. Notice the output in console

Expected behavior

<my-custom-element>
    <span>Slotted content</span>
    <template shadowroot="open">
        <style>
            :host {
                display: inline-block;
                background: red;
            }
        </style>
        <div><slot></slot></div>
    </template>
</my-custom-element>

Screenshots

Device:

• OS: MacOS Monterey 12.6
• Browser Node
• Version 14/16/18

[Heydon]

@rossanmol Thanks for posting this. I have exactly the same experience. The light DOM (<span>Slotted content</span> in this example) is not preserved in any of my cases either.

[capricorn86]

Thank you for reporting @rossanmol and @Heydon! 🙂

The issue has finally been fixed.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v9.20.3