Script elements affect custom element initialization #807
Description
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.