首页 文章

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

提问于
浏览 次
13

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

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>

在像“OK：querySelect（）”这样的评论中，我展示了我试图从任何阴影DOM外部运行的选择器 .

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

我错了什么？

css-selectors dart polymer dart-polymer shadow-dom

2 回答

  • 14

    伪选择器 ::shadow 和combinator /deep/ 在Firefox上不起作用 .

    使用 .shadowRoot

    var shadowroot = app-element.shadowRoot;
shadowroot.querySelector('h2');
    回复于
  • 13

    Update2 (from comments)

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

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

    Original

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

    这应该工作：

    querySelector('h2');

    它只在shadow 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>

    Update

    如果你想搜索

    在当前元素的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');
    回复于

相关问题