Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom elements does not load when defined #404

Closed
capricorn86 opened this issue Mar 14, 2022 · 0 comments · Fixed by #406
Closed

Custom elements does not load when defined #404

capricorn86 opened this issue Mar 14, 2022 · 0 comments · Fixed by #406
Assignees
@capricorn86
Labels
bug Something isn't working high priority

Comments

@capricorn86
Copy link
Owner

Example code:

const { Window } = require('happy-dom');
const VM = require('vm');

const window = VM.createContext(new Window());
const document = window.document;

window.location.href = 'http://localhost:8080';

document.write(`
    <html>
        <head>
             <title>Test page</title>
        </head>
        <body>
            <div>
                <my-custom-element>
                    <span>Slotted content</span>
                </my-custom-element>
            </div>
            <script>
                class MyCustomElement extends HTMLElement {
                    constructor() {
                        super();
                        this.attachShadow({ mode: 'open' });
                    }

                    connectedCallback() {
                        this.shadowRoot.innerHTML = \`
                            <style>
                                :host {
                                    display: inline-block;
                                    background: red;
                                }
                            </style>
                            <div><slot></slot></div>
                        \`;
                    }
                }

                customElements.define('my-custom-element', MyCustomElement);
            </script>
        </body>
    </html>
`);

console.log(document.body.querySelector('div').getInnerHTML({ includeShadowRoots: true }));

Expected:

<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>

Actual:

<my-custom-element>
    <span>Slotted content</span>
</my-custom-element>
@capricorn86 capricorn86 added bug Something isn't working high priority labels Mar 14, 2022
@capricorn86 capricorn86 mentioned this issue Mar 14, 2022
Closed
@capricorn86 capricorn86 self-assigned this Mar 14, 2022
capricorn86 added a commit that referenced this issue Mar 15, 2022
@capricorn86
#404@patch: Fixes issue with custom elements not being loaded when de…
94a9aea 
…fined after the element tag was added to the DOM.
@capricorn86 capricorn86 linked a pull request Mar 15, 2022 that will close this issue
#404@patch: Fixes issue with custom elements not being loaded when de… #406
Merged
capricorn86 added a commit that referenced this issue Mar 15, 2022
@capricorn86
Merge pull request #406 from capricorn86/task/404-custom-elements-doe…
bb82e7e 
…s-not-load-when-defined

#404@patch: Fixes issue with custom elements not being loaded when de…
capricorn86 added a commit that referenced this issue Mar 15, 2022
@capricorn86
#404@patch: Fixes issue with custom elements not being loaded when de…
ce324c1 
…fined after the element tag was added to the DOM.
capricorn86 added a commit that referenced this issue Mar 15, 2022
@capricorn86
Merge pull request #408 from capricorn86/task/407-github-action-for-r…
a8f9953 
…elease-not-working

#404@patch: Fixes issue with custom elements not being loaded when de…
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@capricorn86 capricorn86

Labels
bug Something isn't working high priority
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#404@patch: Fixes issue with custom elements not being loaded when de… capricorn86/happy-dom
1 participant
@capricorn86