attachShadow Dom 的作用和用法详解

最新推荐文章于 2024-12-25 12:57:21 发布

Z and ABB

最新推荐文章于 2024-12-25 12:57:21 发布

阅读量3.9k

点赞数

文章标签： ShadowDOM 组件样式隔离封装 JavaScript

本文链接：https://blog.csdn.net/weixin_43927849/article/details/117420870

版权

ShadowDOM最大的用处应该是隔离外部环境用于封装组件。我们可以轻松地封装一个组件然后可以跨项目共享这个组件。样式也被封装，我们甚至可以不用写CSS 样式完全在我们的组件中，这样就防止开发人员随意修改样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shadow</title>
</head>

<body>
    <div>hello z</div>
    <div id="shadow"></div>
    <script>
        let shadowDom = shadow.attachShadow({ mode: 'open' });  
        let pElem = document.createElement('p');
        let styleElem = document.createElement('style');

        styleElem.innerHTML = 'p{color:red}';
        pElem.innerHTML = 'hello shadow';

        shadowDom.appendChild(pElem);
        // 外部样式影响不了影子节点内部样式
        document.body.appendChild(styleElem);
        
        console.log(document.getElementById('shadow').firstChild) // 返回null
        console.log(document.getElementById('shadow').shadowRoot.firstChild)
        // 返回影子节点
    </script>
</body>

</html>

mode:‘open’ 外界js可以通过影子节点的父元素parentDom.shadowRoot方法获得;
mode:'closed’时，无法被外界js获取

详见