javascriptweb-componentshadow-dompolyfillshtml-imports

Attached ShadowRoot using Polyfill is not query-able

In the following sample, I am trying to create a menu component to experiment component hierarchy.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Sample Menu App</title>
    <script src="js/webcomponents-lite.js"></script>
    <!-- Components -->
    <link rel="import" href="components/global/site-navigation.html">    
</head>

<body>
    <site-navigation></site-navigation>    
</body>

</html>

/components/global/site-navigation.html

<link rel="import" href="nav-item.html">
<template>    
    <div class="nav">Header Goes here</div>
    <ul class="nav">
        <nav-item>Item 1</nav-item> <!-- This is a child component-->       
    </ul>
</template>
<script>
    (function (currentDocument) {
        customElements.define('site-navigation', class SiteNavigation extends HTMLElement {
        constructor() {
            super();
            const shadowTemplate = currentDocument.querySelector('template').content.cloneNode(true);
            this.DOM = this.attachShadow({ mode: 'open' });
            this.DOM.appendChild(shadowTemplate);
            console.log(this.DOM);            
        }

        connectedCallback(){
            this.Initialize();
        }

        Initialize(){
            this.DOM.querySelector("div.nav").innerHTML = "Title"
        }
    });
    })((document.currentScript || document._currentScript).ownerDocument);    
</script>

/components/global/nav-item.html 

<template>
    <li class="nitem">
        <a href="#">Elements</a>
    </li>
</template>
<script>
    (function(currentDocument) {
        customElements.define('nav-item', class SiteNavigationItem extends HTMLElement {
            constructor() {
                super();
                const shadowTemplate = currentDocument.querySelector('template').content.cloneNode(true);
                this.DOM = this.attachShadow({ mode: 'open' });
                this.DOM.appendChild(shadowTemplate);
            }

            connectedCallback(){
                this.Initialize();
            }

            Initialize(){
                let aTag = this.DOM.querySelector('a');
                aTag.innerHTML = "Link 1"
            }
        });
    })((document._currentScript||document.currentScript).ownerDocument);
</script>

It works fine in Chrome. I have applied Polyfill to make it work in other browsers. However, the Initialize method fails in FireFox with message TypeError: this.DOM.querySelector(...) is null. On debugging it is found that the this.DOM = this.attachShadow({ mode: 'open' }); returns different type of objects in FF and Chrome and in the FF result, there is no querySelector! How can I tackle this?

FF Result

Firefox result

Chrome Result

Chrome Result

UPDATE: The parent component (site-navigation) is working fine if link/reference to the child component (nav-item) is removed.

Solution

  • As you stated, it seems that component hierarchy is not supported in the HTML Imports polyfill.

    document.currentScript doesn't work either. The polyfill will copy the <template> in the main document for the 2 imported documents.

    That's why when you query querySelector( 'template' ) in the mail document, it's nav-item's template which is returned, with no div.nav inside.

    As a workaroud, you should be more specific when you query the <template>.

    In site-navigtion.html:

    <template id="site-navigation">
...
</template>
...
const shadowTemplate = currentDocument.querySelector('template#site-navigation').content.cloneNode(true);

    Thus you'll get the right template, even in Firefox.

    Note: document._currentScript doesn't seem to work any more with Polyfill v1.