如何在 Dart 中从外部查询 shadow DOM 中的元素? [英] How to query elements within shadow DOM from outside in Dart?
问题描述
如何在 shadow DOM 中选择节点?考虑以下示例:
How can I select nodes within shadow DOM? Consider the following example:
无阴影"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>
在OK:querySelect()"之类的评论中，我展示了我尝试从任何阴影 DOM 外部运行的选择器.
In comments like "OK: querySelect()" I show selectors I've tried to run from outside any shadowed DOM.
我已经阅读了以下文章:http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru 并根据文章中所说的事实，查询如下: document.querySelector('JS 中的 app-element::shadow h2'); 应该可以按预期工作.但是在 Dart 中它不起作用.
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.
我做错了什么?
推荐答案
Update2(来自评论)
如果您使用自定义 main，请确保在尝试与 Polymer 元素交互之前正确初始化 Polymer(请参阅如何实现 main聚合物应用程序中的函数了解更多详情).
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).
我通常建议避免使用自定义 main 并创建一个 app-element(或您喜欢的任何名称)并将您的初始化代码放入 attached(确保调用 super.attached();) 或在 ready() 中(不需要 super 调用).
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).
原创
在这种情况下，它似乎不在影子 DOM 中，而是在一个孩子中.
It seems in this case it's not in the shadow DOM but a child.
这应该可行:
querySelector('h2');
只有当它在你的元素 <template>...</template> 中时它才会出现在 shadow DOM 中，而不是当你将它包装在自定义元素的标签中时.
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>
更新
如果你想搜索
在当前元素的影子 DOM 中
inside the shadow DOM of the current element
shadowRoot.querySelect('h2');
在 shadow DOM 内的元素的 shadow DOM 内
inside the shadow DOM of an element inside the shadow DOM
shadowRoot.querySelector('* /deep/ h2');
shadowRoot.querySelector('ui-button::shadow h2');
从当前元素之外
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屋！
