如何在 Dart 中以编程方式创建阴影 DOM？

Question

我正在尝试以 Dart 方式实现以下 JS 代码：

代码取自这里：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

<div id="host">Host node</div>
<script>
var root = document.querySelector('#host').createShadowRoot();
root.innerHTML = '<style>' + 
    'button {' + 
      'color: green;' + 
    '}' +
    '</style>' +
    '<content></content>';
</script>

我毫不怀疑在 JS 中它工作正常，但在 Dart 中它失败了。正如我们所知，每个文档只允许一个 dart 脚本，所以我被迫将它放在共享的 dart 文件中：

main.dart

import 'dart:html';
void main() {
  querySelector('#host').createShadowRoot().appendHtml('<style>' +
    'button {' +
      'color: green;' +
    '}' +
    '</style>' +
    '<content></content>');
}

如果我们尝试附加任何其他 html 标签，例如 div、ul 等，一切正常。然而，在 style 和 content 的情况下，它是不同的。我收到警告：

Removing disallowed element <CONTENT>
Removing disallowed element <STYLE>

请告诉我为什么？

更新：

@GünterZöchbauer 关于将 NodeValidatorBuilder() 传递给 appendHtml() 方法。请看图：

最终结果：

var validator = new NodeValidatorBuilder.common()
  ..allowElement('content', attributes: ['some-attribute', 'some-other'])
  ..allowElement('style');
querySelector('#host').createShadowRoot()
..append(document.body.createFragment('<style>' +
  'button {' +
    'color: green;' +
  '}' +
  '</style>' +
  '<content></content>', validator: validator))
// For illustrative purposes, add the button with some text to test styles
..querySelector('content').append(new ButtonElement()..text = 'Button');

Answer 1

这是 dart:html 中的一些默认 XSS 预防措施。您需要将 NodeValidator 传递给 appendHtml，它指定允许哪些元素和属性。

var validator new NodeValidatorBuilder.common()
  ..allowElement('content', attributes: ['some-attribute', 'some-other'])
  ..allowElement('style');

... .append(document.body.createFragment(
    '...some html...', validator: validator));

如何在 Dart 中以编程方式创建阴影 DOM？

How to create shadow DOM programmatically in Dart?

dart

shadow-dom

dart-polymer