gpt4 book ai didi

dart - 如何在Dart中以编程方式创建影子DOM?

转载 作者:行者123 更新时间:2023-12-03 02:57:37 33 4
gpt4 key购买 nike

我正在尝试以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标签,例如 divul等,一切正常。但是,对于 stylecontent,则有所不同。我得到警告:
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');

最佳答案

这是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 - 如何在Dart中以编程方式创建影子DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29644253/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com