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

Question

我将 useShadowDom: false 与我的组件一起使用，以尝试支持更多浏览器，而不必使用麻烦的 web_components polyfill。启用阴影 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() 方法中查询根元素，但此时也未加载模板。

所以，如果我不使用阴影 DOM，我怎么知道模板何时加载到 DOM 以便我可以查询组件中的元素？

编辑

尝试将 ShadowRootAware 和 onShadowRoot 与 useShadowRoot: false 一起使用，如果您尝试查询提供的 ShadowRoot 对象，将导致以下错误：

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 shim。我假设这是因为我已经实现了构造 EmulatedShadowRoot 的 ShadowRootAware。所以，我想我需要一个避免 onShadowRoot

的解决方案

Answer 1

您也可以使用 onShadowRoot 甚至 useShadowDom: false。但是，提供的参数不是 ShadowRoot 对象。

Answer 2

我们安排在下一次事件循环迭代时查询子元素。我不知道特定的内部实现细节，但它对我们来说确实工作正常：

MyComponent(Element root) {
  // Schedule child elements querying on the next event loop iteration when
  // AngularDart will render the child DOM.
  new Future(() {
    root.querySelector('.btn-go-back').onClick.listen((e) {
      if (goBackHandler != null) {
        goBackHandler();
      }
    });
  });
}

Answer 3

您可以通过以下方式查询模拟组件的模板：

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 垫片引起的。这是 shim 的限制之一（您只能使用元素选择器）。

您可以禁用 css 垫片。那么你不会看到错误，但是你不会CSS封装。

在此处查看更多内容：

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

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

Querying child elements of a component when useShadowDom = false

dart

angular-dart