如何在阴影DOM中 Select node ?考虑下面的例子:

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()"这样的注释中,我显示了我try 从任何隐藏的DOM外部运行的 Select 器.

我已经读过下面的文章:http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru,基于文章中所说的事实,JS中的:document.querySelector('app-element::shadow h2');这样的查询应该可以正常工作.然而,在Dart中,它不起作用.

我错了什么?

推荐答案

Update2 (from comments)

如果使用自定义干管,在try 与polymer 元件交互之前,请确保polymer 已正确初始化(有关更多详细信息,请参阅how to implement a main function in polymer apps).

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

Original

在这种情况下,它似乎不在阴影DOM中,而是一个子元素.

这应该是有效的:

querySelector('h2');

只有当它在您的元素<template>...</template>中时,它才在阴影DOM中,而不是当您将它包装在自定义元素的标记中时.

<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

如果您想搜索

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

Dart相关问答推荐

将所有内容放在有序组中,但将括号中的字符组合在一起

Dart 中的静态构造函数

什么时候在 Dart 中使用interfaces接口?

如何从 Polymer Dart 触发自定义事件?

Swipe返回手势

可调用云函数错误:响应缺少数据字段

AnimatedContainer 可以为其高度设置动画吗?

Dart 捕获 http 异常

如何在 Flutter 包/插件开发中添加assets?

Flutter 中的嵌套数据和 BLoC

在 Dart 中将对象推入数组

如何在 GridView (Flutter) 中进行分页

Flutter Text 小部件中的 StrutStyle 是什么

Firebase Crashlytics 崩溃未报告给 Flutter 中的 Firebase 控制台

在 Dart 中使用带有 Future 的循环

Expansion Panel底部溢出

如何在Dart中测试流

如何更改Flatter DevTools的默认浏览器?

Firebase 手机身份验证Flutter crash崩溃

你需要在 Dart 中使用new关键字吗?