Web Components

2020-06-07  本文已影响0人  隐号骑士

Web Components允许创建可重用定制元素,并且在web应用中使用它们。

HTML Templates

<template>

HTML内容模板(<template>)元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现,但随后可以在运行时使用JavaScript实例化。

<slot>

作为 Web Components 技术套件的一部分,是Web组件内的一个占位符。

Custom Elements

customElements.define()

注册一个 custom element,该方法接受以下参数:

生命周期

connectedCallback:当 custom element首次被插入文档DOM时,被调用。
disconnectedCallback:当 custom element从文档DOM中删除时,被调用。
adoptedCallback:当 custom element被移动到新的文档时,被调用。
attributeChangedCallback: 当 custom element增加、删除、修改自身属性时,被调用。

Shadow DOM

选择器无法越过 shadow 边界

image.png

https://caniuse.com/#feat=shadowdomv1

Element.attachShadow() 方法给指定的元素挂载一个Shadow DOM,并且返回对 ShadowRoot 的引用。

示例

https://github.com/mdn/web-components-examples

相关框架/库

https://stenciljs.com/docs/introduction
https://www.polymer-project.org/

上一篇 下一篇

猜你喜欢

热点阅读