使用 Polyfill 附加的 ShadowRoot 不可查询

Question

在下面的示例中，我尝试创建一个菜单组件来试验组件层次结构。

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>

它在 Chrome 中工作正常。我有让它在其他浏览器中工作。但是，Initialize 方法在 FireFox 中失败并显示消息 TypeError: this.DOM.querySelector(...) is null。调试发现FF和Chrome中的this.DOM = this.attachShadow({ mode: 'open' }); returns不同类型的对象，FF结果中没有querySelector！我该如何解决这个问题？

最终结果

Chrome 结果

更新： 如果移除子组件 (nav-item) 的 link/reference，则父组件（站点导航）工作正常。

Answer 1

如您所述，HTML Imports polyfill 似乎不支持组件层次结构。

document.currentScript 也不行。 polyfill 将复制主文档中的 <template> 用于 2 个导入文档。

这就是为什么当您在邮件文档中查询 querySelector( 'template' ) 时，返回的是 nav-item 的模板，里面没有 div.nav。

作为解决方法，您在查询 <template>.

时应该更具体

在站点-navigtion.html:

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

因此您将获得正确的模板，即使在 Firefox 中也是如此。

注意： document._currentScript 似乎不再适用于 Polyfill v1。

使用 Polyfill 附加的 ShadowRoot 不可查询

Attached ShadowRoot using Polyfill is not query-able

javascript

web-component

shadow-dom

polyfills

html-imports