html ShadowDOM

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html ShadowDOM相关的知识，希望对你有一定的参考价值。

var host = document.querySelector('#host');
var root = host.createShadowRoot();
var template = document.querySelector('template');
var clone = document.importNode(template.content, true);

root.appendChild(clone);
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="host">
		<p>My component is hosted in here...</p>
	</div>

	<template>
		<content></content>
	</template>

	<script src="ShadowDOM.js"></script>
</body>
</html>

以上是关于html ShadowDOM的主要内容，如果未能解决你的问题，请参考以下文章

HTML 中的影子 dom

shadow dom 隔离代码 封装

为原生 Shadow DOM 元素设置样式

当我们有 iframe 时为啥要使用 Shadow DOM？

@font-face 没有在 shadowDom 中加载

Light DOM 和 Shadow DOM 的区别