HTML shadow 标签
🌙
手机阅读
本文目录结构
HTML shadow 功能
HTML <shadow> 元素 — Web 组件技术套件的废弃部分 — 目的是用作 Shadow DOM insertion point。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。在正常的 HTML 没有任何用处。
示例
这里是一个使用 <shadow> 元素的简单示例。它是个包含所有所需东西的 HTML 文件。
注：这是个实验性的技术。为了使这个代码有效，你使用的浏览器必须支持 Web 组件。
<html>
<head></head>
<body>
<!-- This <div> will hold the shadow roots. -->
<div>
<!-- This heading will not be displayed -->
<h4>My Original Heading</h4>
</div>
<script>
// Get the <div> above with its content
var origContent = document.querySelector('div');
// Create the first shadow root
var shadowroot1 = origContent.createShadowRoot();
// Create the second shadow root
var shadowroot2 = origContent.createShadowRoot();
// Insert something into the older shadow root
shadowroot1.innerHTML =
'<p>Older shadow root inserted by
<shadow></p>';
// Insert into younger shadow root, including <shadow>.
// The previous markup will not be displayed unless
// <shadow> is used below.
shadowroot2.innerHTML =
'<shadow></shadow> <p>Younger shadow
root, displayed because it is the youngest.</p>';
</script>
</body>
</html>
属性
<shadow> 标签支持 HTML 全局属性。
事件属性
<shadow> 标签支持 HTML 事件属性
