什么是web componets, 它的出现是为了什么?

web components旨在提供一套制作可重用的封装性好的自定义元素的标准。

它包括四部分:

customElements -- 这是一个基于CustomeElementRegistry类生成的对象,用于注册自定义元素,如customElements.define('my-popup', MyPop), 并返回已注册的自定义元素的信息。经过注册的元素就可以直接在html页面上像普通元素那样使用了,如<my-popup/>

shadow DOM -- 影子DOM

HTML template -- HTML模板

HTML import -- HTML导入

customElements.define用于注册自定义元素,那什么是自定义元素呢?

自定义元素即为一个class,在这个class里添加各种内置的元素并实现一些逻辑。如果想在页面上使用这个自定义元素,需要用CustomElementRegistry 的define来注册一下。

自定义元素有两种

  1 autonomous custom elements

  extends HTMLElement, 可以通过<popup-info>或doducment.createElement("popup-info")引入到页面

  注册: customElements.define("popup-info", PopupInfo);

  2 customized built-in elements

  继承自基础的html elements,比如div /p/ span等,需要添加is属性来引入到页面,<p is="word-count">或 document.createElement("p", {is:"word-count"})

  注册: customElements.define('expanding-list', ExpandingList, {extends:"ul"});

  很明显的看出来,customize built-in elements注册时,需要提供第三个参数,来表明是继承自谁

自定义元素的生命用期:

  • connectedCallback:当 custom element首次被插入文档DOM时,被调用。
  • disconnectedCallback:当 custom element从文档DOM中删除时,被调用。
  • adoptedCallback:当 custom element被移动到新的文档时,被调用。
  • attributeChangedCallback: 当 custom element增加、删除、修改自身属性时,被调用。这个回调需要自定义组件提示 static get observedAttributes(){return ['属性名','属性名',...];}。如果在组件还没 append到某元素上,此时setAttribute也会触发该事件。

这些都可以在自定义元素的class里直接引入来针对不同的阶段进行相应的业务处理。

Shadow DOM

它是document node的一种。对保证组件的独立,使其行为、样式、事件等不受外部的影响起关键作用。它给自定义组件里的元素提供了一个隐蔽的分离出来的DOM.

与Shadow DOM相关的几个术语:

  • shadow host 是一个普通的dom元素,用来安放shdow dom
  • shadow tree dom树
  • shadow boundary shadow dom的边界,表示shadow dom结束,regular dom开始
  • shadow root shadow tree的根

shadow DOM的基本用法

this.attachShadow({mode:'open'}),将shadow root加到自定义元素上。mode有两个值:open和closed。open的话,在外边也可以访问到组件的shadowRoot,closed的正好相反.

let myShadowDom = myCustomElem.shadowRoot;

 mode为open时myShadowDom可以取到值,并能对里边的元素做操作。mode为close时myShadowDom为null; 

function updateStyle(elem) {
const shadow = elem.shadowRoot; // 访问自定义组件的shadow root
shadow.querySelector('style').textContent = `
div {
width: ${elem.getAttribute('l')}px;
height: ${elem.getAttribute('l')}px;
background-color: ${elem.getAttribute('c')};
}
`; // shadow root有跟document类似的方法如getElementById,querySelector等
}

  

slot和template

在shadow dom中引入slot来增加灵活性。搭配使用template效果更佳。

slot让用户可给向自定义组件里添加自己的标签元素。它通过name属性来指定一个slot,所以组件内的slot的name要唯一。

<template>标签里的代码片断(DocumentFragment)不会被rend到页面上,只能通过javascript的Node.cloneNode克隆出新的DocumentFragment然后后再appendChild或是insertBefore来加来到dom树上。

template里的documentFragment通过HTMLTemplateElement.content来取得。

<template id="element-details-template">
<style>
details {font-family: "Open Sans Light",Helvetica,Arial}
.name {font-weight: bold; color: #217ac0; font-size: 120%}
h4 { margin: 10px 0 -8px 0; }
h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
h4 span { border: 1px solid #cee9f9; border-radius: 4px }
h4 span { color: white }
.attributes { margin-left: 22px; font-size: 90% }
.attributes p { margin-left: 16px; font-style: italic }
</style>
<details>
<summary>
<span>
<code class="name"><<slot name="element-name">NEED NAME</slot>></code> <!--slot->
<i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> <!--slot->
</span>
</summary>
<div class="attributes">
<h4><span>Attributes</span></h4>
<slot name="attributes"><p>None</p></slot> <!--slot ->
</div>
</details>
<hr>
</template>

  

customElements.define('element-details',
class extends HTMLElement {
constructor() {
super(); // constructor里先写上super,this才能被赋值
var template = document
.getElementById('element-details-template')
.content;// template可以通过dom的方法来取到,它的content属性返回的就是内部的DocumentFragment
const shadowRoot = this.attachShadow({mode: 'open'}) // 自定义组件首先要创建shadow,通过appendChild来往shadow里添加标签元素
.appendChild(template.cloneNode(true));
}
})

  

<element-details>
<span slot="element-name">slot</span> <!--通过给标签添加slot="slotName"来将这个标签填充到自定义标签里->
<span slot="description">A placeholder inside a web
component that users can fill with their own markup,
with the effect of composing different DOM trees
together.</span>
<dl slot="attributes"> <!--如果不给名称为attribute的slot写标签的话,会用自定义组件里的该slot内的标签->
<dt>name</dt>
<dd>The name of the slot.</dd>
</dl>
</element-details>

还有一个与此相关的css伪类:define :host :host-context,方法,可以用到时再学习

总结

实现web componets的步骤与方法如下:

https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

学习web components的更多相关文章

  1. web Components 学习之路

    就目前而言,纯粹的Web Components在兼容性方面还有着较为长远的路,这里做个记录总结,以纪念自己最近关于Web Components的学习道路. 参考教材 JavaScript 标准参考教程 ...

  2. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  3. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  4. 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  5. Facebook React 和 Web Components(Polymer)对比优势和劣势

    目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...

  6. Fiori Fundamentals和SAP UI5 Web Components

    这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...

  7. Web Components 入门实例教程

    转自阮一峰http://www.ruanyifeng.com/blog/2019/08/web_components.html 组件是前端的发展方向,现在流行的 React 和 Vue 都是组件框架. ...

  8. Web API之Web Components

    本文参考<你的前端框架要被web组件替代了>. 于2011年面世的Web Components是一套功能组件,让开发者可以使用 HTML.CSS 和 JavaScript 创建可复用的组件 ...

  9. Lightning Web Components 安装试用(一)

    Lightning Web Components 简称(lwc) 是一个快速企业级的web 组件化解决方案,同时官方文档很全,我们可以完整的 学习lwc 项目结构 使用npx 官方提供了一个creat ...

随机推荐

  1. JS中将json字符串转为json对象的三种方式

    第一种:利用JSON的parse方法,即jsonObj=JSON.parse(jsonStr); 第二种:jsonObj = eval('(' + jsonStr+ ')'); 第三种:比较难理解:j ...

  2. windows----------Windows10 远程桌面连接失败,报CredSSP加密oracle修正错误解决办法

    1.通过运行gpedit.msc进入组策略配置(需要win10专业版,家庭版无解),策略路径:“计算机配置”->“管理模板”->“系统”->“凭据分配”,设置名称: 加密 Oracl ...

  3. json对象组按某个字段排序

    JS排序 键值对 var sortBy=function (filed,rev,primer){ rev = (rev) ? -1 : 1; return function (a, b) { a = ...

  4. Intellij IDEA 配置Tomcat远程调试

    一.前言 在服务器端开发过程中,由于服务器环境差异导致运行结果不符合预期. 所以就需要到IDEA Debug 服务器代码.看起来貌似很高大上的事情. 今天就说说使用Intellij IDEA 配置的方 ...

  5. C#调用java方法踩坑记

    首先,我的java代码写了一个遗传算法,这是我硕士毕业论文的核心算法,项目是基于C#的web项目.但是现在又不想用C#重写遗传算法代码,于是就想用C#去调用java的代码.在网上找了方法,一般有两种: ...

  6. 水管工游戏——dfs

    问题描述: 水管工游戏是指如下图中的矩阵中,一共有两种管道,一个是直的,一个是弯的,所有管道都可以自由旋转,最终就是要连通入水口可出水口.其中的树为障碍物. 方案: 输入格式:输入的第一行为两个整数N ...

  7. 高校表白APP-冲刺第三天

    第三天,我们进行了第三次会议. 一.任务: 昨日任务:完成APP基本的登陆框架. 今日任务:完成登录界面修改界面注册界面,并解决闪退. 明日任务:完成界面跳转,并彻底解决闪退. 二.遇到的困难: 今天 ...

  8. CCF CSP 201412-1 门禁系统

    题目链接:http://118.190.20.162/view.page?gpid=T21 问题描述 试题编号: 201412-1 试题名称: 门禁系统 时间限制: 1.0s 内存限制: 256.0M ...

  9. java.sql.SQLException: ORA-28000: the account is locked

    解决方式:参考博客https://blog.csdn.net/java280580332/article/details/70756533

  10. 认识volatile的工作原理

    前言 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatile是轻量级的synchronized,它在多处理器开发中保证了共享变量的“可见性”.可见性的意思是当 ...