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

Question

我试图实现达特方式下面的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失败。 我们知道每个文档只有一个镖脚本是允许的，所以我不得不将其放置到共享文件镖：

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

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

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

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