使用Shadow DOM扩充SVG标记
Jus*_*kic 7 javascript html5 svg web-component shadow-dom
我一直在尝试HTML5和SVG; 我对JavaScript和Web开发都很陌生,所以我可能会缺少一些东西.我正在尝试创建可重用的Web组件,利用一些新功能,如HTML Imports,Shadow DOM和扩展现有的Web元素.我有两个html文件:
的test.html
<html>
<head>
<title>Test HTML5</title>
</head>
<body>
<link rel="import" href="Elements/tank.html">
<svg width="100%"
viewBox="0 0 500 500"
style="border: solid; border-width: thin; stroke-width: 2;">
<polyline points="0,300 100,300 100,100 250,100 250,150 500,150"
style="fill:none;stroke:black;stroke-width:3"
onclick="window.alert('you clicked line')" />
<svg is="my-tank" x="200" y="350" width="50" height="50"></svg>
</svg>
</body>
</html>
tank.html
<html>
<body>
<template id="tank">
<rect fill="red" width="50" height="50"></rect>
</template>
<script type="text/javascript">
var tankElement = document.currentScript.ownerDocument.querySelector('#tank');
document.registerElement('my-tank', {
prototype: Object.create(SVGSVGElement.prototype, {
createdCallback: {
value: function () {
var root = this.createShadowRoot();
//Works
root.innerHTML = tankElement.innerHTML;
//Doesn't work
//var tankTemplate = document.importNode(tankElement.content, true);
//root.appendChild(tankTemplate);
}
}
}),
extends: 'svg'
});
</script>
</body>
</html>
//Works注释下的代码绘制了一个红色矩形,我期望在SVG可绘制空间中.下面的代码//Doesn't work不会绘制任何内容或产生任何错误.
屏幕截图//Works:
屏幕截图//Doesn't work:
我一直在测试Opera 41.0.
您不能这样做，因为svg不能成为影子主机。只有有限数量的元素可以成为影子主机：
articleaside,,,,,,,,,,,,,,,,,,,,,,,,, 。blockquotebodydivfooterh1h2h3h4h5h6headermainnavpsectionspan
所以不仅如此svg，还有其他人喜欢input或textarea不能拥有shadow-dom（我说的是Shadow-DOM v1）。
attachShadow有关详细信息，请参阅 的定义： https://dom.spec.whatwg.org/#dom-element-attachshadow
另请注意：
SVGSVGElement不执行HTMLElement。- 还听说 SVG 在其实现中已经包含了一个 Shadow-dom，并且使用 Custom Elements v1 ，您可能只有一个 Shadow-dom（请参见此处： http: //hayato.io/2016/shadowdomv1/）。
为什么不创建一个常规的自定义元素，它可能包含<svg>其 Shadow-dom 内的元素？