Script elements affect custom element initialization #807

jason0x43 · 2017-12-15T15:03:06Z

Bug

The presence of script elements in a document affects how custom elements are initialized.

What appears to be happening is that the presence of a script element with content (code or just whitespace), the custom element's initialization method is called at the point that the script element is processed in the DOM. So if the script element is before the dojo-button element in the DOM, initialization is called before dojo-button has been processed, so the node is empty (document.body.childNodes at this point contains only a whitespace text node and the script node). If the script element is after dojo-button, the button's content is available in initialization. However, if additional nodes are added to the document after the script element it can be seen that processing is still affected by the presence of the script tag, as document.body.childNodes will only contain nodes up to the script node.

Package Version: 0.3.0

Code

// createButtonElement.ts
export default function createButtonElement(): CustomElementDescriptor {
    return {
        tagName: 'dojo-button',
        widgetConstructor: Button,
        attributes: [],
        properties: [],
        events: [],
        initialization(properties: any) {
            const element = <HTMLElement>(<any>this);
            console.log('element: ' + element.innerHTML);
            properties.label = element.innerHTML;
            element.innerHTML = '';
        }
    };
}

<body>
    <script> </script>
    <dojo-button>Click me</dojo-button>
</body>

Expected behavior:

element.innerHTML should equal "Click me".

Actual behavior:

element.innerHTML is empty.

The text was updated successfully, but these errors were encountered:

jason0x43 · 2017-12-15T15:23:28Z

Additional information:

This is fine:

<head>
    <script>
    </script>
    <link rel="import href="button/button.html">
</head>
<body>
    <dojo-button>Click me</dojo-button>
</body>

but this is not

<head>
    <link rel="import href="button/button.html">
    <script>
    </script>
</head>
<body>
    <dojo-button>Click me</dojo-button>
</body>

The issue seems to be that if a script element with content (either inline or via a src attribute) occurs after the custom element import, it causes the custom element's initialization method to run too early (at the point in the doc where the script element is encountered).

agubler · 2018-07-04T09:58:56Z

Is this still an issue @jason0x43?

kitsonk added beta5 bug labels Dec 15, 2017

kitsonk added this to the beta.5 milestone Dec 15, 2017

agubler removed the beta5 label Jan 4, 2018

agubler removed this from the beta.5 milestone Jan 4, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Script elements affect custom element initialization #807

Script elements affect custom element initialization #807

jason0x43 commented Dec 15, 2017 •

edited

Loading

jason0x43 commented Dec 15, 2017 •

edited

Loading

agubler commented Jul 4, 2018

Script elements affect custom element initialization #807

Script elements affect custom element initialization #807

Comments

jason0x43 commented Dec 15, 2017 • edited Loading

jason0x43 commented Dec 15, 2017 • edited Loading

agubler commented Jul 4, 2018

jason0x43 commented Dec 15, 2017 •

edited

Loading

jason0x43 commented Dec 15, 2017 •

edited

Loading