useShadowDom = false时查询组件的子元素

Question

我正在使用useShadowDom: false我的组件试图支持更多的浏览器,而不必使用麻烦的web_components polyfill.启用shadow DOM后,我会做这样的事情:

void onShadowRoot(ShadowRoot root) {
  root.querySelector('.btn-go-back').onClick.listen((e) {
    if (goBackHandler != null) {
      goBackHandler();
    }
  });
}

onShadowRoot将在我的组件模板加载后运行,因此DOM中存在所有组件元素.如果没有启用Shadow DOM,我会在构造函数中注入组件的根元素,并执行以下操作:

MyComponent(this._root){
  _root.querySelector('.btn-go-back').onClick.listen((e) {
    if (goBackHandler != null) {
      goBackHandler();
    }
  });
}

这不起作用,因为组件的模板尚未加载到DOM中,因此根元素还没有任何子查询.

我已经尝试实现AttachAware,并查询方法中的根元素attach(),并且此时也没有加载模板.

所以,如果我没有使用shadow DOM,我怎么知道模板何时加载到DOM中,这样我才能查询组件中的元素？

编辑

如果您尝试查询提供的对象,则尝试使用ShadowRootAware和将导致以下错误:onShadowRootuseShadowRoot: falseShadowRoot

Unsupported operation: Not supported

STACKTRACE:
#0      EmulatedShadowRoot._notSupported     (package:angular/core_dom/emulated_shadow_root.dart:5:21) 
#1      EmulatedShadowRoot.querySelector (package:angular/core_dom/emulated_shadow_root.dart:32:63)

我也尝试了以下组合:

• 在构造函数中注入根元素和
• 查询工作中的根元素onShadowRoot,有点,但现在我在控制台输出中看到这个:

---

[WebPlatformShim] WARNING: Failed to set up Shadow DOM shim for [find-result].

InvalidCharacterError: The string contains invalid characters. '[find-result]' is not a valid attribute name.

因此,出于某种原因,即使useShadowDom在我的所有组件上设置为false,它仍然在尝试使用ShadowDom垫片.我假设这是因为我已经实现了ShadowRootAware哪个构造了EmulatedShadowRoot.所以,我认为我需要一个避免的解决方案onShadowRoot

Answer 1

您可以按如下方式查询模拟组件的模板:

class Component implements ShadowRootAware {
  Element el;

  Component(this.el);

  void onShadowRoot(_) {
    this.el.querySelector('.blah');
  }
}

错误消息:

[WebPlatformShim] WARNING: Failed to set up Shadow DOM shim for [find-result].

是由css垫片引起的.这是垫片的限制之一(您只能使用元素选择器).

你可以禁用css shim.然后你不会看到错误,但你不会有CSS封装.

在这里查看更多:

https://github.com/angular/angular.dart/wiki/CSS-Shim