Shadow DOM(二)

在前一篇博文中,简单地介绍了Shadow DOM是什么。

本文,将重点介绍Shadow DOM能做什么、如何创建Shadow DOM以及Shadow DOM的相关概念。

Shadow DOM 能做什么

简单地说,有了Shadow DOM(若浏览器支持该规范),开发者可以封装HTML标签,CSS样式以及JavaScript,提供一个新的作用域空间。Shadow DOM结合后续将介绍的其他Web Components技术,开发者将具有开发出类似<input type="time">或者类似<audio>、<video>这样的标签的能力。

如何创建Shadow DOM

要创建Shadow DOM,首先需要选择Shadow DOM挂载的节点,然后调用createShadowRoot()方法,创建一个Shadow DOM的根节点,在这个根节点上可以添加任意的由普通HTML标签形成的DOM节点,从而形式由一颗DOM Tree。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <div class="host">Hello World!</div>
    <script>
        var host = document.querySelector('.host');
        var root = host.createShadowRoot();

        var node = document.createElement('h1');
        node.textContent = 'Shadow DOM 介绍';

        var para = document.createElement('p');
        para.textContent = 'Shadow DOM 详细信息';

        root.appendChild(node);
        root.appendChild(para);
    </script>
</body>
</html>

上述代码中,首先选择了class为host的节点,然后在这个节点上调用createShadowRoot()方法创建Shadow DOM的根节点root。然后再分别创建了两个普通HTML节点并设置其内容,最后将它们添加到root上。

运行结果,如下图所示:

从运行结果可以看到,原来div中的“Hello World!"内容并没有在浏览器中渲染出来,而是渲染Shadow DOM中的内容。这也是Shadow DOM的一个特性,在后续的介绍中将会进行详细解释。

Shadow DOM的相关概念

在上一节中,为了创建Shadow DOM,先需要选择一个DOM 节点,然后调用createShadowRoot()方法创建Shadow DOM的根节点。这个根节点,称为Shadow Root。与Shadow Root关联的那个节点称为Shadow Host。与Shadow DOM对应,常规的DOM,称为Light DOM。在Light DOM与Shadow DOM之间存在一个边界,称为Shadow Boundary。Shadow Boundary的重要作用就是,避免了Light DOM中的样式渗透到Shadow
DOM中,从而避免了样式冲突等问题。

时间: 2024-10-22 19:30:28

Shadow DOM(二)的相关文章

Shadow DOM获取Shadow host的内容

在Shadow DOM(二)中,介绍了与Shadow DOM相关的概念,包括Shadow host等等. 本文将重点介绍如何将Light DOM中的内容传到Shadow DOM中. 而在Shadow DOM 与HTML Templates一文的示例中可以看到Shadow host: <div class="host">Hello World!</div>的内容在该节点创建并附加Shadow Root后并没有在浏览器中得到渲染,也就是说Shadow host的内容

Shadow DOM 与 HTML Templates

在之前的Web Components系列文章中,简单介绍了Web Components概要,HTML Templates,Shadow DOM,Shadow DOM(二). 本文将在此基础上,介绍Shadow DOM与HTML Templates如何一起协作. 在Shadow DOM(二)中,介绍了如何创建Shadow DOM:通过调用createShadowRoot()方法创建root节点,然后在JavaScript中创建普通的HTML节点, 并将这些节点附到Shadow Root上.但这种方

javascript系列之DOM(二)

原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API.可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作.下面将总结出总结出几种很实用的扩展方法.包括 after()和before(), A:after()和before() 1 function after(elem){ 2 if(this.parentNode){ 3 this.parentNode.

shadow dom

初识shadow dom 我们先看个input="range"的表现: what amazing ! 一个dom能表现出这么多样式嘛? 无论是初学者和老鸟都是不肯相信的,于是在好奇心的驱使下,我们打开chrome的开发工具设置 结果发现了input节点里面有我们需要的答案 input节点里面有他表现需要的dom节点,dom节点里面还有些样式,而这些不容易为人知的节点都在一个#shadow-root的节点下面. 来张图了解下结构 document 这个很好理解,就是我们的正常文档 doc

shadow dom 隔离代码 封装

Shadow DOM是指浏览器的一种能力,它允许在文档(document)渲染时插入一棵DOM元素子树,但是这棵子树不在主DOM树中. Shadow DOM 解决了 DOM 树的封装问题. 有了 Shadow DOM,元素就可以和一个新类型的节点关联.这个新类型的节点称为 shadow root.与一个 shadow root 关联的元素称作一个 shadow host.shadow host 的内容不会渲染:shadow root 的内容会渲染. 比如,你拥有如下的标记: <button>H

使用shadow dom封装web组件

什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <video controls=""> <source src="https://mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/ogg"> </v

Shadow DOM系列6-综述

Web Components 系列主要由自定义元素(Custom Elements).HTML 引入(HTML Imports)和影子 DOM(shadow DOM) 组成,而 Shadow DOM 无疑是当中的重中之重.本文对下面翻译的几篇文章进行综述,总结了 Shadow DOM 术语梳理和结构关系. 术语标注 影子 DOM(shadow DOM):是一种依附于文档原有节点的子 DOM,具有封装性 光明 DOM(light DOM):就是原生的 DOM,为了与影子 DOM 区别采用的名词 影

Shadow DOM系列2-基础

英文链接:Shadow DOM: The Basics, 27 AUGUST 2013 on Web Components, Shadow DOM 在我的上一篇博文里,我介绍了 Shadow DOM 并举例说明为啥它这么重要.今天,我们要干点苦力活--"码"上见分晓!在本文的最后,你将能够创建自己的封装组件--它封装了外部的内容,并重新整理内部结构来产生一个完全不同的东西. 让我们开始吧! 环境支持 为了能尝试下面的实例,建议使用 Chrome 33 或者更高版本的 Chrome. 一

使用custom elements和Shadow DOM自定义标签

具体的api我就不写 官网上面多  如果不知道这个的话也可以搜索一下 目前感觉这个还是相当好用的直接上码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g