Shadow DOM 初探

本文作者:IMWeb went 原文出处:IMWeb社区 未经同意,禁止转载

1、Shadow DOM的概念

Shadow DOM用官方的翻译来说就是影子 DOM,他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文档的时候会给指定的DOM结构插入编写好的DOM元素,但是插入的Shadow DOM 会与主文档的DOM保持分离,也就是说Shadow DOM不存在于主DOM树上。

Shadow DOM 需要append某一个DOM元素上,但是Shadow DOM封装出来的DOM元素是独立的,外部的配置不会影响到内部,内部的配置也不会影响外部。但是我们还是能够通过js或者css来控制Shadow DOM里面封装好的元素。

在我们勾选了控制台的show user agent shadow DOM后,我们看video标签的时候会发现平时隐藏看不见的元素。

2、Shadow DOM的作用

上文讲过 ,Shadow DOM 是游离在 DOM 树之外的节点树,因此其拥有优秀的密封性。

也就是说,我们在开发组件的时候,可以利用浏览器为我们提供的这一个强大的封装功能去隐藏一些实现细节。开发者在使用我们开发组件的时候一目了然,不需要他关心的细节我们可以通过Shadow DOM隐藏掉,只给开发者暴露他们需要的接口便可。

3、Shadow DOM的创建方法

  var ele =document.getElementsByClassName('shadow-dom')[0];
  var root = ele.createShadowRoot();
 root.textContent = 'hello shadow dom';

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webcomponent学习笔记(一)

    webcomponent是一个新的浏览器功能,为web提供了一个标准组件模型,包括以下几个部分: Shadow DOM Custom Elements HTML...

    IMWeb前端团队
  • webcomponent学习笔记(一)

    webcomponent是一个新的浏览器功能,为web提供了一个标准组件模型,包括以下几个部分:

    IMWeb前端团队
  • React的diffing算法学习

    这段时间主要在学习React的使用,React是一个用于构建用户界面的框架,其使用了一些方式来使得视图渲染更加高效,这里主要记录一下学习期间了解到的Diffin...

    IMWeb前端团队
  • 从 React 历史的长河里聊虚拟DOM及其价值

    本质上是 JavaScript 对象,这个对象就是更加轻量级的对 DOM 的描述。

    前端劝退师
  • Shadow DOM v1 简介

    Shadow DOM 是 Web Components 定义的四大标准之一。Shadow DOM 解决了构建网络应用的脆弱性问题。脆弱性是由 HTML、CSS ...

    阿宝哥
  • 现代前端技术解析:现代前端交互框架

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Shadow DOM简介

    一个网页会形成一颗DOM树,树上有很多结点,但过多的结点使结构复杂起来,Shadow DOM允许我们用封装的方式简化这种结构。Shadow DOM是网页DOM树...

    gojam
  • Virtual DOM

    DOM操作太消耗浏览器计算资源,diff算法才有其存在的意义。 DOM操作为什么慢? 1.直观感受:在浏览器控制台,用for循环遍历div属性,会看到有很多...

    城市中的游牧民族
  • DOM优化之重绘和回流

    浏览器内核中的JS 引擎和渲染引擎是独立存在的,当我们用JS去操作DOM时,本质上是JS引擎和渲染引擎之间进行的“跨界交流”。

    九旬大爷
  • virtual DOM和diff算法(一)

    哈喽,大家好,今天是周一。周末回老家了,每次回老家后的第一个工作日都感觉很陌生,各位宝宝(づ。◕‿‿◕。)づ,有多久没回老家了?不管在哪里,记得好好照顾自己,好...

    用户3258338

扫码关注云+社区

领取腾讯云代金券