Shadow DOM简介

这篇文章假设您已经掌握了DOM以及与DOM操作相关的JS部分。文中的代码符合ES6语法。

Shadow DOM是什么

一个网页会形成一颗DOM树,树上有很多结点,但过多的结点使结构复杂起来,Shadow DOM允许我们用封装的方式简化这种结构。Shadow DOM是网页DOM树上的特殊结点的结构,这个结点内部同样可以包含一颗DOM树,不过在网页DOM树上只会看到Shadow DOM的根节点。如<video>标签实际上运用了Shadow DOM来包含一系列组件。

Shadow DOM的用法

向普通元素附着Shadow DOM

let shadow = elementRef.attachShadow({mode:'open'});

配置参数可选open或closed,用参数决定Shadow DOM是否可在JavaScript内访问。open模式下,elementRef.shadowRoot返回shadowRoot,而closed模式下返回null,因此如果使用closed模式,需要在建立ShadowDOM时保存引用(如上)。

改变Shadow DOM的内容

获取到ShadowDOM的引用(shadow)后发现,shadowRoot也可以像其他DOM元素一样操作,比如设置innerHTML或者append元素等。

封装Custom Element

ShadowDOM的真正作用在于封装。我们可以使用类包装我们的元素。

//代码来自MDN
class PopUpInfo extends HTMLElement {
  constructor() {
    // 必须首先调用 super方法
    super();
    var shadow = this.attachShadow({mode: 'open'});
    // 元素的具体功能写在下面

    ...
  }
}

包装完成后使用以下方式在网页中调用:

customElements.define('popup-info', PopUpInfo);
<popup-info></popup-info>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 计网实验操作记录

    在dhcp-config模式下设置地址范围和子网掩码,network x.x.x.x 255.255.255.0

    gojam
  • CSS常用选择器

    HTML: <element class="classname"></element>

    gojam
  • S-DES

    gojam
  • 增量 DOM 与虚拟 DOM 的对比使用

    如果你熟悉 React,你大概听说过虚拟 DOM 的概念。React 受欢迎的主要原因之一就是通过虚拟 DOM 提高用户界面性能。

    桃翁
  • 从 React 历史的长河里聊虚拟DOM及其价值

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

    前端劝退师
  • Shadow DOM 初探

    Shadow DOM用官方的翻译来说就是影子 DOM,他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文档的时候会给指定的DOM结构插入...

    IMWeb前端团队
  • React虚拟DOM的理解

    Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最...

    WindrunnerMax
  • Shadow DOM v1 简介

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

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

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

    奋飛
  • DOM优化之重绘和回流

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

    九旬

扫码关注云+社区

领取腾讯云代金券