1

我想提供一种可能性，使用装饰器以不同的外观和思想来展示我的组件。就像是：

<body>
    <my-component my-decorator></my-component>
</body>

.

@Component(
  selector: 'my-component',
  templateUrl: '.../my-component.html',
  cssUrl: '.../my-component.css',
  publishAs: 'comp',
)
class MyComponent {

  MyComponent(final Element element) {
    Logger.root.fine("MyComponent(): element = $element, element.attributes = ${element.attributes.keys}");
  }

}


@Decorator(selector: '[my-decorator]')
class MyDecorator {

  final Element element;

  @NgOneWay('my-decorator')
  var model; // is not used

  MyDecorator(this.element) {
    Logger.root.fine("MyDecorator(): element = $element, element.nodeName = ${element.nodeName}");
    Logger.root.fine("MyDecorator(): element.shadowRoot = ${element.shadowRoot}, element.parent = ${element.parent}");
  }

}

不幸的是，它似乎my-decorator是之前处理过的，my-component所以它shadowRoot在注入的Element对象中获得了 null 属性。

可以检查支持类中my-decorator属性的存在my-component，但这显然会污染设计。

更新：感谢 Marko Vuksanovic 的重播，以下内容现在返回：

@Decorator(selector: '[my-decorator]')
class MyDecorator extends AttachAware {

  final Element element;

  @NgOneWay('my-decorator')
  var model; // is not used

  MyDecorator(this.element) {
    Logger.root.fine("MyDecorator(): element = $element, element.nodeName = ${element.nodeName}");
    Logger.root.fine("MyDecorator(): element.shadowRoot = ${element.shadowRoot}, element.parent = ${element.parent}");
  }

  void attach() {
    Logger.root.fine("attach(): element.shadowRoot = ${element.shadowRoot}");
  }

}

问题仍然是如何修改 shadow DOM 的样式。

提前感谢您的任何评论/想法/解决方案。

4

2 回答 2

2

您可以尝试使用 AttachAware 及其附加方法。您应该在您的装饰器和/或组件中实现 AttachAware 接口。

这是 Angular.dart 文档的链接 - https://docs.angulardart.org/#angular-core-annotation.AttachAware

要更改 ShadowDom 组件的样式，您可以使用 element.shadowRoot 来获取 Web 组件的根。影子根几乎就像“文档”对象。您可以使用 shadow root 获取对任何元素的引用，然后您可以根据需要通过应用样式轻松修改它。

您可以使用类似 this.element.shadowRoot.querySelector('[some-attr]').innerHtml = "Modified by decorator" // 免责声明：未经测试，但我希望你明白这一点。

于 2014-05-18T05:32:16.753 回答
0

您可以通过编程方式向 shadowDom 添加样式标记：

shadowRoot.append(new StyleElement()..text = ':host{background: red;}');

或者

shadowRoot.append(new StyleElement()..text = "@import url('some.css')");
于 2014-05-19T12:54:19.473 回答