如何在shadow DOM中选择节点?考虑以下示例:
- "无阴影" DOM的结构*
<app-element>
#shadow-root
<h2></h2>
<content>
#outside shadow
<h2></h2>
</content>
<ui-button>
#shadow-root
<h2></h2>
</ui-button>
</app-element>
- 索引. html**
<body>
<app-element>
<!-- OK: querySelect('app-element').querySelect('h2') -->
<!-- OK: querySelect('app-element h2') -->
<!-- There is no problem to select it -->
<h2>app-element > content > h2</h2>
</app-element>
</body>
- 模板. html**
<polymer-element name="ui-button" noscript>
<template>
<!-- FAIL: querySelect('app-element::shadow ui-button::shadow h2') -->
<h2>app-element > ui-button > h2</h2>
</template>
</polymer-element>
<polymer-element name="app-element" noscript>
<template>
<!-- FAIL: querySelect('app-element::shadow').querySelect('h2') -->
<!-- FAIL: querySelect('app-element::shadow h2') -->
<!-- FAIL: querySelect('app-element').shadowRoot.querySelect('h2') -->
<h2>app-element > h2</h2>
<content></content>
<ui-button></ui-button>
</template>
</polymer-element>
在"OK:querySelect()"我显示了我试图从任何阴影DOM外部运行的选择器。
我已经读过下面的文章:http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru,并基于文章中提到的事实,查询如下:JS中的document.querySelector('app-element::shadow h2');
应该可以正常工作。但是在Dart中它不工作。
我哪里错了?
5条答案
按热度按时间xfb7svmp1#
伪选择器
::shadow
和组合器/deep/
在firefox上不起作用。使用
.shadowRoot
gpfsuwkq2#
如果使用自定义main,请确保在尝试与Polymer元素交互之前正确初始化Polymer(有关更多详细信息,请参见how to implement a main function in polymer apps)。
我通常建议不要使用自定义main,而是创建一个
app-element
(或者您喜欢的任何名称),并将初始化代码放入attached
(确保调用super.attached();
)或ready()
(不需要超级调用)。在本例中,它似乎不在影子DOM中,而是一个子对象。
这应该行得通:
只有当它在元素
<template>...</template>
中时,它才在shadow DOM中,而不是当您将它 Package 在自定义元素的标记中时。x一个一个一个一个x一个一个二个x
如果你想搜索
在当前元素的阴影DOM中
在影子DOM内的元素的影子DOM内
从当前元素外部
nkcskrwz3#
适用于需要易于使用的解决方案的用户
像这样使用它:
它将遍历rootNode中的所有元素,因此速度不会很快,但很容易使用。
4c8rllxm4#
使用reduce方法的Vanilla专用辅助函数
像这样使用它
blpfk2vs5#
这是一个老问题,但我很惊讶没有通用的解决方案(不仅仅是在 dart )。让我们解决它的所有情况!
试用示例:
1.转到Google's text-to-speech demo
1.打开控制台并输入: