css-selectors – 如何在Dart中从外部查询shadow DOM中的元素？

如何在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') -->
  <!-- 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外部运行的选择器.

我已经阅读了以下文章：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru并且根据文章中的说法,查询如：document.querySelector(‘app-element :: shadow h2’);在JS中应该按预期工作.然而在Dart中它不起作用.

我错了什么？

解决方法

Update2(来自评论)

如果使用自定义main,请确保在尝试与Polymer元素交互之前正确初始化Polymer(有关详细信息,请参阅how to implement a main function in polymer apps).

我通常建议避免使用自定义main并创建app元素(或者您喜欢的任何名称)并将初始化代码放入附加(确保调用super.attached();)或ready()(不需要超级电话).

原版的

在这种情况下,它似乎不是影子DOM而是孩子.

这应该工作：

querySelector('h2');

它只在影子DOM中,当它在你的元素中时< template> …< / template>当你将它包装在自定义元素的标记中时.

<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>

更新

如果你想搜索

在当前元素的shadow DOM内

shadowRoot.querySelect('h2');

在阴影DOM内的元素的阴影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');

css-selectors – 如何在Dart中从外部查询shadow DOM中的元素？

解决方法

猜你在找的CSS相关文章