Nested element (web component) can’t get its template

by

document.currentScript contains a reference to the script that is currently parsed and executed. Therefore it is not valid anymore for your purpose when the constructor() function is called (from another script).

Instead you shoud save its value in a variable at the beginning of the script, and use this variable in the constructor:

<script>
    var currentScript = document.currentScript
    customElements.define( ... )
    ...
</script>

If you have multiple scripts, you should use distinct names.

Alternately, you can encapsulate the ephemeral value in a closure:

(function(owner) {
    customElements.define('app-container', class extends HTMLElement {
        constructor() {
           super();
           let shadowRoot = this.attachShadow({ mode: 'open' });
           const content = owner.querySelector('#app-container').content;
           shadowRoot.appendChild(content.cloneNode(true));
        }
    });
})(document.currentScript.ownerDocument);

Here the value document.currentScript.ownerDocument is assigned to the owner argument which is still defined correctly when constructor() is called.

owner is locally defined so you can use the same name in the other document.

More Related Contents:

  1. How to let imported css font / icons have effects on elements in the shadow dom?
  2. How to get element in user-agent shadow root with JavaScript?
  3. Is it possible to access Shadow DOM elements through the parent document?
  4. Override styles in a shadow-root element
  5. Share style across web components “of the same type”
  6. Use of Template with HTML Custom Elements
  7. How to automate shadow DOM elements using selenium?
  8. How to implement a dynamic form with controlled components in ReactJS?
  9. How to separate web components to individual files and load them?
  10. Accessing Shadow DOM tree with Selenium
  11. Accessing elements in the shadow DOM
  12. How to create new instance of an extended class of custom elements
  13. Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries
  14. How to communicate between Web Components (native UI)?
  15. Polymer share styles across elements
  16. Why can't I put JS code between <script src="…">CODE</script>?
  17. jQuery multiply vars inside value [duplicate]
  18. How to disable browser reload button on mouse click
  19. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  20. Uncaught ReferenceError: function is not defined with onclick
  21. Why use jQuery on() instead of click()
  22. Check if array contains all elements of another array
  23. \u200b (Zero width space) characters in my JS code. Where did they come from?
  24. How to copy all the attributes of one element and apply them to another?
  25. Div Z-Index issue with Flash movie
  26. createElement vs. createElementNS
  27. JavaScript resize event on scroll – mobile
  28. Prime Numbers JavaScript
  29. Relative paths with fetch in Javascript
  30. Webstorm: “Cannot Resolve Directory”

Leave a Comment