如何在Dart中从外部查询shadow DOM中的元素？ [英] How to query elements within shadow DOM from outside in Dart?
问题描述
如何在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>
index.html
< body>
< app-element>
<！ - OK：querySelect（'app-element'）。querySelect（'h2'） - >
<！ - OK：querySelect（'app-element h2'） - >
<！ - 没有问题，选择它 - >
< h2> app-element>内容> h2< / h2>
< / app-element>
< / body>
templates.html
< polymer-element name =ui-buttonnoscript>
< template>
<！ - FAIL：querySelect（'app-element :: shadow ui-button :: shadow h2'） - >
< h2> app-element> ui按钮> h2< / h2>
< / template>
< / polymer-element>
< polymer-element name =app-elementnoscript>
< 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（）这样的注释中，我展示了我试图从外部运行的选择器
我已阅读以下文章： http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru ，并基于以下事实：说在文章中，查询像： document.querySelector（'app-element :: shadow h2'）; 在JS应该按预期工作。但是在Dart中它不工作。
我错了什么？
Update2（来自评论）
如果您使用自定义主文件，请确保Polymer在尝试与您的Polymer元素（有关详情，请参阅如何在聚合物应用程序中实现主要功能）。
我通常建议避免自定义main并创建一个 app-element （或任何你喜欢的名字），并把你的初始化代码放入<$ c $ （确保调用 super.attached（）; ）或 ready（）
在这种情况下，它不是在阴影DOM，而是一个孩子。
这应该工作：
querySelector（'h2'）;
只有在shadow DOM中，当它在你的元素< template> ; ...< / template> 不会将它包装在自定义元素的标签中。
< polymer-element name =some-element>
< template>
<！ - 这变成了阴影DOM - >
< content>
<！ -
由内容元素获取的内容变为子元素或某元素
- >
< / content>
< / template>
< / polymer-element>
< body>
< some-element>
<！ - 这里的这些元素由
内容标签捕获并且成为some-element - >
< div>一些文字< / div>
< / some-element>
< / body>
更新
如果您要在当前元素的shadow DOM中搜索
shadowRoot.querySelect（'h2'）;
在shadow DOM内的元素的shadow DOM
shadowRoot.querySelector（'* / deep / h2'）;
shadowRoot.querySelector（'ui-button :: shadow h2'）;
import'dart：html'as dom;
...
dom.querySelector（'* / deep / h2'）;
//或（仅在< app-element>的shadow DOM中）
dom.querySelector（'app-element :: shadow h2'）;
dom.querySelector（'app-element :: shadow ui-button :: shadow h2'）;
//或（任意深度）
dom.querySelector（'app-element / deep / h2'）;
How can I select nodes within shadow DOM? Consider the following example:
structure of "unshadowed" DOM
<app-element>
#shadow-root
<h2></h2>
<content>
#outside shadow
<h2></h2>
</content>
<ui-button>
#shadow-root
<h2></h2>
</ui-button>
</app-element>
index.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>
templates.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>
In comments like "OK: querySelect()" I show selectors I've tried to run from outside any shadowed DOM.
I've already read the following article: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru and based on the fact that it was said in the article, query like: document.querySelector('app-element::shadow h2'); in JS should work as expected. However in Dart it doesn't work.
What do I wrong?
Update2 (from comments)
If you use a custom main, ensure that Polymer is properly initialized before you try to interact with your Polymer elements (see how to implement a main function in polymer apps for more details).
I usually suggest to avoid a custom main and create an app-element (or whatever name you prefer) and put your initialization code into attached (ensure to call super.attached();) or in ready() (doesn't need the super call).
Original
It seems in this case it's not in the shadow DOM but a child.
This should work:
querySelector('h2');
It's only in the shadow DOM when it is within your elements <template>...</template> not when you wrap it in the tag of your custom element.
<polymer-element name="some-element">
<template>
<!-- this becomes the shadow DOM -->
<content>
<!--
what gets captureD by the content element becomes a child or some-element
-->
</content>
</template>
</polymer-element>
<body>
<some-element>
<!-- these elements here are captured by the
content tag and become children of some-element -->
<div>some text</div>
</some-element>
</body>
Update
If you want to search
inside the shadow DOM of the current element
shadowRoot.querySelect('h2');
inside the shadow DOM of an element inside the shadow DOM
shadowRoot.querySelector('* /deep/ h2');
shadowRoot.querySelector('ui-button::shadow h2');
from outside the current element
import 'dart:html' as dom;
...
dom.querySelector('* /deep/ h2');
// or (only in the shadow DOM of <app-element>)
dom.querySelector('app-element::shadow h2');
dom.querySelector('app-element::shadow ui-button::shadow h2');
// or (arbitrary depth)
dom.querySelector('app-element /deep/ h2');
这篇关于如何在Dart中从外部查询shadow DOM中的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
