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

如何在shadow DOM中选择节点？请考虑以下示例：

“没有阴影”的DOM的结构@H_301_3@

<app-element>
  #shadow-root
    <h2></h2>
    <content>
      #outside shadow
      <h2></h2>
    </content>
    <ui-button>
      #shadow-root
        <h2></h2>
  </ui-button>
</app-element>

的index.html@H_301_3@

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

<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外部运行的选择器.@H_301_3@

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

我错了什么？@H_301_3@

解决方法

Update2(来自评论)

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

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

原版的@H_301_3@

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

这应该工作：@H_301_3@

querySelector('h2');

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

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

更新@H_301_3@

如果你想搜索@H_301_3@

在当前元素的shadow DOM内@H_301_3@

shadowRoot.querySelect('h2');

在阴影DOM内的元素的阴影DOM内@H_301_3@

shadowRoot.querySelector('* /deep/ h2');
shadowRoot.querySelector('ui-button::shadow h2');

从当前元素之外@H_301_3@

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相关文章