Javascript 如何使用shadowdom创建聚合自定义元素，以便访问它'；树影根？
我已使用Polymer cli（版本0.16.0）构建Polymer项目，但无法使用控制台访问shadow root：Javascript 如何使用shadowdom创建聚合自定义元素，以便访问它'；树影根？,javascript,polymer,web-component,shadow-dom,polymer-cli,Javascript,Polymer,Web Component,Shadow Dom,Polymer Cli,我已使用Polymer cli（版本0.16.0）构建Polymer项目，但无法使用控制台访问shadow root： var element=document.getElementsByTagName（“我的应用程序”）[0]。shadowRoot返回未定义，因此看起来shadow DOM处于关闭模式 如何强制自定义元素使用开放模式，以便从外部访问其shadowRoot 编辑2： 这里的主要问题是访问shadowRoot需要做些什么，所以我稍微改变了这个问题，使其与shadowdom模式无关
var element=document.getElementsByTagName（“我的应用程序”）[0]。shadowRootnpm install -g polymer-cli
mkdir my-app
cd my-app
polymer init starter-kit
polymer serve --open
...
<head>
...
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/src/my-app.html">
...
</head>
<body>
<my-app></my-app>
</body>
</html>
。。。
...
//设置聚合物选项
窗口聚合物={
dom:“影子”，
懒汉：没错
};
//如果浏览器不支持本机Web组件，请加载webcomponentsjs polyfill
（功能（）{
"严格使用",；
var onload=函数（）{
//对于本机导入，手动激发WebComponentsReady so用户代码
//可以为本机导入和多填充导入使用相同的代码路径。
如果（！window.HTMLImports）{
document.dispatchEvent(
新的CustomEvent（'WebComponentsReady'，{bubbles:true}）
);
}
};
var webComponentsSupported=(
文档中的“registerElement”
&&document.createElement（“链接”）中的“导入”
&&document.createElement（“模板”）中的“内容”
);
如果（！WebComponents受支持）{
var script=document.createElement（'script'）；
script.async=true；
script.src='/bower_components/webcomponentsjs/webcomponents lite.min.js'；
script.onload=onload；
document.head.appendChild（脚本）；
}否则{
onload（）；
}
})();
//加载预缓存服务工作者
if（导航器中的“serviceWorker”）{
addEventListener（'load'，function（））{
register（'/service-worker.js'）；
});
}
...
...
<dom-module id="my-app">
<template>
...
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
}
});
</script>
</dom-module>
。。。
...
聚合物({
是：“我的应用程序”，
特性：{
第页：{
类型：字符串，
reflectToAttribute:true，
观察者：''u pageChanged'
}
},
观察员：[
“_routePageChanged（routeData.page）”
],
_routePageChanged:功能（第页）{
this.page=page | |“view1”；
},
_页面更改：功能（第页）{
//按需加载页面导入。如果失败，则显示404页面
var resolvedPageUrl=this.resolveUrl（'my-'+page+'.html'）；
this.importHref（resolvedPageUrl，null，this.\u showPage404，true）；
},
_showPage404:函数（）{
this.page='view404'；
}
});
shadowRootvar element = Polymer.dom(document.getElementsByTagName("my-app")[0]).root
有关更多详细信息，请参见实际上它应该可以工作。请参阅下面的代码片段 也许您没有在正确的位置添加
{dom:'shadow'}polymer.htmloutput.textContent=document.querySelector（'my-app'）。shadowRoot
窗口聚合物={
dom:“影子”，
懒汉：没错
}
你好
聚合物({
是：“我的应用程序”
})
var element=Polymer.dom（document.getElementsByTagName（“我的应用”）[0]）。rootPolymer.dom（…）document.getElementsByTagName（“我的应用程序”）[0]document.getElementsByTagName（“我的应用程序”）[0]#shadow root（open）