资讯专栏INFORMATION COLUMN

什么是Shadow DOM?

SimpleTriangle / 779人阅读

摘要:什么是几周前,我写了一篇关于究竟是什么的文章。回顾一下,文档对象模型是文档的表示。这些虽然当然与原始有关,但它们指的是截然不同的概念。在以后的文章中,我将对虚拟进行分析。

什么是Shadow DOM?

几周前,我写了一篇关于究竟是什么DOM的文章。回顾一下,文档对象模型是HTML文档的表示。浏览器使用它来确定页面上要呈现的内容,并通过Javascript程序来修改页面的内容,结构或样式。

例如,让我们采用以下HTML文档:



 
   My first web page
  
 
    

Hello, world!

How are you?

上面的HTML文档将产生以下DOM树。

html

head

title

My first web page

body

h1

Hello, world!

p

How are you?

在过去几年中,您可能听说过“Shadow DOM”和“Virtual DOM”等术语。这些虽然当然与原始DOM有关,但它们指的是截然不同的概念。在本文中,我将详细介绍Shadow DOM以及它与原始DOM的区别。在以后的文章中,我将对虚拟DOM进行分析。

一切都是 global 的

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117299.html

相关文章

  • 纯原生组件化-模块化的探索

    摘要:纯原生的组件化模块化的一次小小的尝试,用到了如下几个新特性对标签结构的一个封装,真正意义上的组件,能保证中的元素不会被外界影响,内部也不会影响到外部的行为,变成了一个独立的模块。 纯原生的组件化、模块化的一次小小的尝试,用到了如下几个新特性:shadown-DOM 对HTML标签结构的一个封装,真正意义上的组件,能保证 shadow-DOM 中的DOM元素不会被外界影响,内部也不会影响...

    张金宝 评论0 收藏0
  • Web Components 什么样的东西

    摘要:生命周期和回调在这个的基础上,标准提供了一系列控制自定义元素的方法。生命周期和自定义元素标签的保持一致。否则,这个属性会返回一个表示引入的文件的文档对象,类似于。相关的东西不多,而且它现在已经是纳入生效的标准文档中了。 前端组件化这个主题相关的内容已经火了很久很久,angular 刚出来时的 Directive 到 angular2 的 components,还有 React 的 co...

    XUI 评论0 收藏0
  • Web Components 什么样的东西

    摘要:生命周期和回调在这个的基础上,标准提供了一系列控制自定义元素的方法。生命周期和自定义元素标签的保持一致。否则,这个属性会返回一个表示引入的文件的文档对象,类似于。相关的东西不多,而且它现在已经是纳入生效的标准文档中了。 前端组件化这个主题相关的内容已经火了很久很久,angular 刚出来时的 Directive 到 angular2 的 components,还有 React 的 co...

    wizChen 评论0 收藏0
  • Web Components 什么样的东西

    摘要:生命周期和回调在这个的基础上,标准提供了一系列控制自定义元素的方法。生命周期和自定义元素标签的保持一致。否则,这个属性会返回一个表示引入的文件的文档对象,类似于。相关的东西不多,而且它现在已经是纳入生效的标准文档中了。 前端组件化这个主题相关的内容已经火了很久很久,angular 刚出来时的 Directive 到 angular2 的 components,还有 React 的 co...

    ranwu 评论0 收藏0
  • JavaScript 如何工作: Shadow DOM 的内部结构+如何编写独立的组件!

    摘要:向影子树添加的任何内容都将成为宿主元素的本地元素,包括,这就是影子实现样式作用域的方式。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! JavaScript 是如何工作...

    godlong_X 评论0 收藏0

发表评论

0条评论

SimpleTriangle

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<