css样式隔离（iframe替代方案Shadow Root）

雪狼之夜

已于 2025-03-23 21:38:45 修改

阅读量734

点赞数 23

CC 4.0 BY-SA版权

分类专栏： js 文章标签： css javascript 前端

于 2025-03-23 19:31:51 首次发布

本文链接：https://blog.csdn.net/xuelang532777032/article/details/146460187

js 专栏收录该内容

59 篇文章

订阅专栏

iframe替代方案、样式沙盒、影子dom、Shadow Root、渲染完成、事件绑定、节点属性改变

▍PART 序

解决多套ui框架共存的痛点
自由性、灵活性比iframe高。
文中会提到渲染完成判断、改变内部节点属性、内部dom的事件绑定
如果小伙伴发现问题，雪狼会在css样式隔离（iframe替代方案Shadow Root）的底部评论区说明、补充、纠正
web前端从业第14个年头了，哪天公众号不更新了，也希望大家莫怪

1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			button {
				background: blue;
				color: #fff;
			}

			.btn {
				border: 1px red solid;
			}
		</style> <button class="btn">你好</button>
		<div id="btnDiv"> </div>
		<script>
			document.querySelector('.btn').onclick = () => {
				alert("1")
			}
		</script>
		<script>
			// 获取父节点			
			var hostElement = document.querySelector('#btnDiv');
			// 创建一个ShadowRoot			
			var shadowRoot = hostElement.attachShadow({
				mode: 'open'
			});
			shadowRoot.innerHTML =
				`<style>
					button {
					font-size:18px;
					}
				</style>			
				<button class="btn">插入的按钮</button>		  
				`;
		</script>
	</body>
</html>

Shadow Root是否渲染完成

<script>
	var upHtmlSize = 0
	//计算渲染次数
	// 创建 MutationObserver 监听 Shadow DOM 变化
	var observer = new MutationObserver((mutationsList) => {
		for (let mutation of mutationsList) {
			if (mutation.type === 'childList') {
				upHtmlSize += 1;
				if (upHtmlSize == 1) { //首次渲染完成
					console.log("渲染完成")
				}
			}
		}
	});
	observer.observe(shadowRoot, {
		childList: true,
		subtree: true
	});
</script>

Shadow Root内元素绑定事件click


var shadowRoot = hostElement.shadowRoot;
// 在 Shadow Root 中查找元素
var shadowElement = shadowRoot.querySelector('button')
shadowElement.addEventListener('click', () => {
	alert('Shadow DOM 中的按钮被点击了！');
});

Shadow Root改变元素属性

加个计时器只是为了方便你看效果，你可以去掉


setTimeout(()=>{
	shadowElement.textContent = "改变了按钮名"
},1000)

▍PART 谷歌扩展插件开发对照表

▍PART 扩展阅读