Web Components 学习笔记一: Web Components是什么?解决了什么问题?
公众号:妙蛙种子前端
文章原文地址:Web Components笔记一: Web Components是什么?解决了什么问题? | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客
Web Components是HTML5提供的一种原生组件封装集成的方式,我们可以通过这种技术封装一些类似Vue自定义组件的元素,在html中直接使用。
提到Web Components我们优先会提到组件化,什么是组件化?指的是将相似的业务抽离成固定的交互形式,然后通过html、JavaScript、css去实现这个交互,并且将这个交互的html、JavaScript、css合并在一个独立、封闭的空间内,对外暴露功能接口。用面向对象的思维来看就是:高内聚、低耦合。
前端组件化的阻碍
在jQuery的时代,我们都会遇到这种场景:引入一个幻灯片的插件,js、css都正常引入了,但样式却和官方demo不一致。细查后发现其实是我们全局的css影响了插件的样式。当然第三方插件也有可能影响到我们的主页面,举个例子:
组件一:
<div>组件一</div><style>div {color: red;}
</style>
组件二:
<div>组件二</div><style>div {color: blue;}
</style>
以上两个组件分别定义了自己的div标签,并且对自己的div设置了独立的样式。如果将两个组件放在同一个页面的时,就会发现其中一个组件的样式影响到了另一个组件。同时,如果我们在组件内通过JavaScript获取所有的div进行dom操作,也会影响到其他组件的div。
为什么会这样?因为css是影响全局的,并且在页面的任何js中,我们都能通过api操作页面的dom。
Vue是如何解这类问题的?
Vue在定义组件时,可以给组件的 <style>
标签增加了 scoped
属性,来表示标签中的内容为组件局部的样式。如:
<template><div>组件一</div>
</template><style scoped>div {color: red;}
</style>
编译阶段使用 vue-loader
编译这个组件时,会给这个组件生成一个独一无二的ID,作为这个组件的tag。
在编译 <template>
时会为每个标签打上 data-v-{组件ID}
的属性,如:
<div data-v-73637230>组件一</div>
在编译样式时也会将带有 scoped
属性的 css
也通通打上data-v-{组件ID}
的属性选择器,如:
div[data-v-73637230] {color: red;
}
Web Components如何解决组件作用域问题的?
基于以上的问题,现代浏览器提供了两个特性让我们能自由的创建一些可复用的组件,并且组件的状态与外部是完全隔离开的。
Custom Element 特性
创建一个继承 HTMLElement 的自定义dom元素,可以自定义dom元素的各种生命周期,实现dom的自定义功能,如:
class CustomElement extends HTMLElement {constructor() {// 必须首先调用 super方法super();// 元素的功能代码写在这里...}
}
Shadow DOM 特性
允许将隐藏的 DOM 树附加到常规的 DOM 树中。它以 shadow root 节点为起始根节点,在这个根节点的下方,可以是任意元素,和普通的 DOM 元素一样。
我们可以使用js的api来操作 Shadow DOM
,就和操作常规 DOM 一样。例如添加子节点、设置属性,以及为节点添加自己的样式(例如通过 element.style
属性),或者为整个 Shadow DOM 添加样式(例如在 <style>
元素内添加样式)。不同的是,Shadow DOM 内部的元素始终不会影响到它外部的元素(除了 :focus-within
),这为封装提供了便利。
当然 Shadow DOM
也不算是很新的东西,很早前就已经有实际的用途,例如 <video>
标签实际上就是运行在 Shadow DOM
中,包含了一系列的按钮和其他控制器。Shadow DOM 标准允许你为你自己的元素(custom element)维护一组 Shadow DOM。
Web Components 学习笔记系列:
Web Components 学习笔记一: Web Components是什么?解决了什么问题?_妙蛙种子前端
Web Components 学习笔记二:使用 Custom Elements 创建可复用的自定义组件_妙蛙种子前端
交个朋友, 关注 “妙蛙种子前端” 公众号吧
Web Components 学习笔记一: Web Components是什么?解决了什么问题?相关推荐
- java web getrealpath,[学习笔记]java web ServletContext.getRealPath(String str)方法的使用
ServletContext.getRealPath(String str)方法的使用 --------------------------------------------------转载---- ...
- Python学习笔记:web开发3
前言 最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
- Python学习笔记:web开发2
前言 最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
- JavaWeb学习笔记2 —— Web服务器简介
JavaWeb学习笔记2 -- Web服务器简介 参考教程B站狂神https://www.bilibili.com/video/BV12J411M7Sj 相关技术 ASP: 微软:国内最早流行的就是A ...
- Java web与web gis学习笔记(二)——百度地图API调用
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- web安全学习笔记--sql语句(sql注入基础上)
一.基础知和表内操作语法 1.sql语句对大小写不敏感!!! SELECT - 从数据库表中获取数据:select * from (columns/tables/databases); UPDATE ...
- web前端学习笔记(最新)
web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
- 【学习笔记】Web前端到后端数据的交互
[学习笔记]Web前端到后端数据的交互
- Web Components 学习 01 认识 Web Components、一些组件库使用
什么是 Web Components 开发项目的时候为什么不手写原生 JS,而是要用现如今非常流行的前端框架,原因有很多,例如: 良好的生态 数据驱动试图 模块化 组件化 等 Web Componen ...
最新文章
- bootstrap-less源码分析:行和列
- 超越ReLU却鲜为人知,3年后被挖掘:BERT、GPT-2等都在用的激活函数
- 顺丰被删库?半个DBA的跑路经验总结
- git如何忽略已经提交的文件 (.gitignore文件无效)
- Java泛型深入理解小总结
- 云函数连接mysql超时_云函数访问MYSQL数据库出错?
- Who Gets the Most Candies? POJ - 2886 (线段树)
- c# 获取html代码怎么写,C#获取网页源代码的方法
- 被单位开除,已经交了14年的养老保险,该怎么办?
- Python图片转html字符画
- Java Stream flatMap()
- html自动播放视频不可用muted,html5_videoaudio的autoplay属性失效的解决方法
- 研究生开口月薪一万 企业暗示“靠边站”
- OpenCart支付宝付款接口(直接到账、担保交易、双接口)
- Operation和OperationQueue实战:异步下载图片并给图片加滤镜
- wps如何删除指定页眉
- 「精品」无损批量压缩图片工具 - Caesium Image Compressor
- 为何天搜科技这些互联网企业对杭州情有独钟?
- 什么是失血模型和充血模型?(DDD)
- L2-003 月饼 作者 陈越单位 浙江大学
热门文章
- linux ubuntu环境下 android jdk sdk eclipse adt 以及手机连接无法识别的解决方法
- [DB][mysql]下出现 java.sql.SQLException: Incorrect string value: '\xF4\x80\x8E\xAE\xE8\x83...'
- node快速搭建后台
- POJ-2325解题报告
- C++11中类数据成员初始化方法详解
- DM8数据库备份与恢复 DMRMAN
- 金蝶中间件AAS无法访问管理平台提示404
- 锁存器 D触发器 寄存器区别 详细区别解释 Latch D Flipflop register
- 编写河北大学官网界面
- python三种等待元素方法