shadow Dom（shadowRoot） 访问

示例

gtx.shadowRoot.getElementById("translation")

gtx为host对象

起因

抓去chorome谷歌翻译插架的内容。有信息的内容div id是"bubble-content"

var contend=document.getElementById("bubble-content")

contend是null ? ! !怎么会是null?我又没拼错。

这不科学，然后发现这个div 外层有个#shadow-root (open)

没见过的东西

事不为常便有妖，问题8成就在这里

查了相关资料后确定

简而言之shadow-root 包裹下的对象，不在全局的dom树中，因此getElementById 等方法，获取不到包裹中的对象。

该功能的目的就是，独立出一块渲染块，不受外层样式的影响，内层的样式也不影响外层的显示。

访问方式为

1得到shadow-root 外层的根node 这个node是在全局dom树中的。

var gtx=document.getElementById("gtx-host")

2取得gtx的shadow块

gtx.shadowRoot

3之后再怎么操作就随意了

比如取shadow块中的节点。

var truecontent=gtx.shadowRoot.getElementById("translation");

后来想想，其实以前隐约在哪见到过这功能，但因为一真没有用，淡忘了

时间： 2024-08-01 10:44:35

shadow Dom（shadowRoot） 访问的相关文章

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系列2-基础

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

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上.但这种方

Shadow DOM（二）

在前一篇博文中,简单地介绍了Shadow DOM是什么. 本文,将重点介绍Shadow DOM能做什么.如何创建Shadow DOM以及Shadow DOM的相关概念. Shadow DOM 能做什么 简单地说,有了Shadow DOM(若浏览器支持该规范),开发者可以封装HTML标签,CSS样式以及JavaScript,提供一个新的作用域空间.Shadow DOM结合后续将介绍的其他Web Components技术,开发者将具有开发出类似<input type="time"&g

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 区别采用的名词 影

使用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