如何在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));