css 隔离

css一旦生效,就会应用于全局,所以很容易出现冲突。css隔离就是为了解决这个问题。可以使用的方法大概就几个:

命名空间:

这很好理解,其实就是给每个不同模块使用的css规划好命名,这样所有的css就都不会出现冲突,这种方法虽然很好理解和简单,但是编写起来很繁琐,维护成本会很高,当然,现在也有打包工具很容易就可以实现就是了。

css Modules:

这其实跟命名空间有点类似,vue应该就是使用类似的方法,给选择器加上特殊的字符串,达到css隔离的效果。

css-in-js:

这个概念已经诞生很多年了,作为开发了快四年的前端,还是因为了解一下css隔离才知道有这个东西。有查到好像是Facebook员工提出的,刚提出这个概念的时候还火了一段时间,后来那些开源的库几乎被废弃或者不再维护。本着不求甚解的心理,于是不去学习,感兴趣的可以自行去查找资料。

Shadow DOM:

这是今天的主角,今天分享主要是为了提一提这个概念。

MDN上面解释是:Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点,在这个根节点的下方,可以是任意元素,和普通的 DOM 元素一样。

你可以使用同样的方式来操作 Shadow DOM,就和操作常规 DOM 一样——例如添加子节点、设置属性,以及为节点添加自己的样式(例如通过 element.style 属性),或者为整个 Shadow DOM 添加样式(例如在 <style> 元素内添加样式)。不同的是,Shadow DOM 内部的元素始终不会影响到它外部的元素(除了 :focus-within),这为封装提供了便利。

注意,不管从哪个方面来看,Shadow DOM 都不是一个新事物——在过去的很长一段时间里,浏览器用它来封装一些元素的内部结构。以一个有着默认播放控制按钮的 <video> 元素为例。你所能看到的只是一个 <video> 标签,实际上,在它的 Shadow DOM 中,包含来一系列的按钮和其他控制器。Shadow DOM 标准允许你为你自己的元素(custom element)维护一组 Shadow DOM。

我们可以设置一下看一下video的Shadow DOM:

然后自己实现一个:

let shadow = document.getElementById('app').attachShadow({mode: 'closed'});

var p = document.createElement('p');

p.innerText = '这是shdow dom';shadow.appendChild(p);

不过奇怪的是自己实现的能在标签那边看见,Shadow DOM真正意义上的实现了dom和css的隔离。今天只是分享概念,感兴趣可以自己去MDN看看那个例子。至于是否在项目中使用,自己也不知道。

(完)

Coding 个人笔记

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-19

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 了解虚拟DOM和diff算法

    今天分享一下虚拟DOM和diff算法,当然,只是非常简单的了解一下,知道这两个东西的概念。

    wade
  • 在线动态换肤思路

    很早之前就在想在线换肤的实现思路,主要是之前有个项目有换肤,连布局图片都不一样,无能为力,只好写不同页面,然后通过打包的时候配置删除和替代文件实现,但是在线换肤...

    wade
  • 雅虎军规第三天

    页面含有重复的脚本文件会影响性能,因为重复脚本会创建不必要的HTTP请求,执行无用的JavaScript代码,而影响页面性能。即使脚本是可缓存的,在用户重新加载...

    wade
  • webcomponent学习笔记(一)

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

    IMWeb前端团队
  • 深入解剖前端,你不知道的Web 组件标准

    组件化使得复杂的前端结构变得清晰,各个部分独立起来,高内聚低耦合,使得维护成本大大降低。

    一墨编程学习
  • 每个基因都值得研究吗?

    该队列研究首次报道了ChinaMAP一期研究对覆盖全国27个省份和直辖市,8个民族,超过1万人的高深度(40X)全基因组测序数据和表型的系统性分析。

    生信技能树
  • 数据库不推荐使用外键的9个理由

    java思维导图
  • 数据库不使用外键的 9 个理由

    缺少外键明显问题是数据库不能强制进行引用完整性检查,如果在高一层没有正确处理,则可能会导致数据不一致(子行没有相应父行)。

    好好学java
  • 最简单的FFmpeg YUV420P图像拼接实例

    在项目中需要将解码出来的l两个YUV420P格式的图像合并在一起,然后重新编码为H264,最后封装为mp4文件。主要说明一下两个YUV420P使用FFmpeg合...

    望天
  • EF简介

    EF:EF是 asp.net的一套ORM框架. ORM: 广义上:ORM指的是面向对象的模型和关系型数据库的数据库之间的相互转换; 狭义上:ORM可以被认为是,...

    郑小超.

扫码关注云+社区

领取腾讯云代金券