使用Polyfill附加的ShadowRoot不可查询 [英] 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>
在Chrome中正常运行.我已经应用了Polyfill 使其在其他浏览器中运行.但是，初始化方法在FireFox中失败，并显示消息 TypeError:this.DOM.querySelector(...)为空.在调试时，发现this.DOM = this.attachShadow({ mode: 'open' });在FF和Chrome中返回不同类型的对象，并且在FF结果中，没有querySelector！我该如何解决?
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?
更新: 如果删除了对子组件(nav-item)的链接/引用，则父组件(站点导航)可以正常工作.
UPDATE: The parent component (site-navigation) is working fine if link/reference to the child component (nav-item) is removed.
推荐答案
正如您所说，HTML Imports polyfill似乎不支持组件层次结构.
As you stated, it seems that component hierarchy is not supported in the HTML Imports polyfill.
document.currentScript也不起作用. polyfill将为导入的2个文档复制<template>在主文档中.
document.currentScript doesn't work either. The polyfill will copy the <template> in the main document for the 2 imported documents.
这就是为什么当您在邮件文档中查询querySelector('template')时，返回的是nav-item的模板，里面没有div.nav.
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.
作为一种工作方式，查询<template>时应该更加具体.
As a workaroud, you should be more specific when you query the <template>.
在 site-navigtion.html 中:
<template id="site-navigation">
...
</template>
...
const shadowTemplate = currentDocument.querySelector('template#site-navigation').content.cloneNode(true);
因此，即使在Firefox中，您也将获得正确的模板.
Thus you'll get the right template, even in Firefox.
注意: document._currentScript在Polyfill v1中似乎不再起作用.
Note: document._currentScript doesn't seem to work any more with Polyfill v1.
这篇关于使用Polyfill附加的ShadowRoot不可查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
