云南网站建设小程序开发,织梦网站栏目如何做下拉,怎么让网站被百度搜到,网络广告主要有哪几种Web Component 概述 Web Component 是一种用于构建可复用用户界面组件的技术#xff0c;开发者可以创建自定义的 HTML 标签#xff0c;并将其封装为包含逻辑和样式的独立组件#xff0c;从而在任何 Web 应用中重复使用。 每个 Web Component 都具有自己的 DOM 和样式隔离开发者可以创建自定义的 HTML 标签并将其封装为包含逻辑和样式的独立组件从而在任何 Web 应用中重复使用。 每个 Web Component 都具有自己的 DOM 和样式隔离避免了全局 CSS 和 JavaScript 的冲突问题。它还支持自定义事件和属性可以与其他组件进行通信和交互。 不同于 Vue/React 等社区或厂商的组件化开发方案Web Component 被定义在标准的 HTML 和 DOM 标准中。它由一组相关的 Web 平台 API 组成也可以与现有的前端框架和库配合使用。 Web Component 的兼容性良好可以在现代浏览器中直接使用也可以通过 polyfill 兼容到旧版浏览器IE11 理论上可以兼容出于初步调研的考虑本文不对兼容性作过多探讨。 同类组件化方案比较 Pros技术Cons可以异构Micro Frontend需要主应用、对子应用有侵入、样式统一困难模块级的多项目在运行时共享Module Federation主要依赖webpack5既有项目改造成本未知实现异构引用需要借助其他插件模块级动态共享Vue :is 动态import依赖vue技术栈可以异构、完全解耦、对原有开发方法改造极小Web CompnentIE兼容性仅11可通过Polyfill支持 TL;DR 实例用异构系统共建 web componentshttps://gitee.com/tonylua/web-component-test1/tree/master Web Component 关键特性 Custom Elements自定义元素 是 Web 标准中的一项功能它允许开发者自定义新的 HTML 元素开发者可以使用 JavaScript 和 DOM API使新元素具有自定义的行为和功能 4.13.1.1 Creating an autonomous custom element This section is non-normative. For the purposes of illustrating how to create an autonomous custom element, lets define a custom element that encapsulates rendering a small icon for a country flag. Our goal is to be able to use it like so: flag-icon countrynl/flag-icon To do this, we first declare a class for the custom element, extending HTMLElement: class FlagIcon extends HTMLElement {constructor() {super();this._countryCode null;}static observedAttributes [country];attributeChangedCallback(name, oldValue, newValue) {// name will always be country due to observedAttributesthis._countryCode newValue;this._updateRendering();}connectedCallback() {this._updateRendering();}get country() {return this._countryCode;}set country(v) {this.setAttribute(country, v);}_updateRendering() {...}
} We then need to use this class to define the element: customElements.define(flag-icon, FlagIcon); 继承自基类 HTMLElement自定义的元素名称需符合 DOMString 标准简单来说就是必须带短横线其中 observedAttributes 声明的属性才能被 attributeChangedCallback() 监听完整生命周期方法说明为: class MyCustomElement extends HTMLElement {constructor() {super();// 在构造函数中进行初始化操作// 用 this.appendChild(...) 等挂载到dom中// 用 addEventListener() 绑定事件到 this.xxx 上}connectedCallback() {// 元素被插入到文档时触发等价于 vue 的 mounted}disconnectedCallback() {// 元素从文档中移除时触发等价于 vue 的 beforeDestory / destoyed}attributeChangedCallback(attributeName, oldValue, newValue) {// 元素的属性被添加、移除或更改时触发等价于 vue 的 beforeUpdate / updated}
} 除了继承 HTMLElement也可以继承其既有子类并在使用是采用原生标签被继承类 is 语法如 // Create a class for the element
class WordCount extends HTMLParagraphElement {constructor() {// Always call super first in constructorsuper();// Constructor contents omitted for brevity// …}
}// Define the new element
customElements.define(word-count, WordCount, { extends: p }); p isword-count/p Shadow DOM DOM 编程模型令人诟病的一个方面就是缺乏封装不同组件之间的逻辑和样式很容易互相污染。 鉴于这个原因Web components 的一个重要属性就是封装——可以将标记结构、样式和行为隐藏起来并与页面上的其他代码相隔离。其中Shadow DOM 接口是关键所在它可以将一个隐藏的、独立的 DOM 附加到一个元素上 Shadow DOM 是 DOM nodes 的附属树。这种 Shadow DOM 子树可以与某宿主元素相关联但并不作为该元素的普通子节点而是会形成其自有的作用域Shadow DOM 中的根及其子节点也不可见。 相比于以前为了实现封装而只能使用 iframe 实现的情况Shadow DOM 无疑是一种更优雅的创建隔离 DOM 树的方法。 Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点在这个根节点的下方可以是任意元素和普通的 DOM 元素一样。 这里有一些 Shadow DOM 特有的术语需要我们了解 Shadow host一个常规 DOM 节点Shadow DOM 会被附加到这个节点上。Shadow treeShadow DOM 内部的 DOM 树。Shadow boundaryShadow DOM 结束的地方也是常规 DOM 开始的地方。Shadow root: Shadow tree 的根节点。 你可以使用同样的方式来操作 Shadow DOM就和操作常规 DOM 一样——例如添加子节点、设置属性以及为节点添加自己的样式例如通过 element.style 属性或者为整个 Shadow DOM 添加样式例如在 style 元素内添加样式。不同的是Shadow DOM 内部的元素始终不会影响到它外部的元素除了 :focus-within这为封装提供了便利。 注意不管从哪个方面来看Shadow DOM 都不是一个新事物——在过去的很长一段时间里浏览器用它来封装一些元素的内部结构。以一个有着默认播放控制按钮的 video 元素为例。你所能看到的只是一个 video 标签实际上在它的 Shadow DOM 中包含了一系列的按钮和其他控制器。Shadow DOM 标准允许你为你自己的元素custom element维护一组 Shadow DOM。 基本用法 可以使用 Element.attachShadow() 方法来将一个 shadow root 附加到任何一个元素上。它接受一个配置对象作为参数该对象有一个 mode 属性值可以是 open 或者 closed let shadow elementRef.attachShadow({ mode: open });
let shadow elementRef.attachShadow({ mode: closed }); open 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM例如使用 Element.shadowRoot 属性 let myShadowDom myCustomElem.shadowRoot; 如果你将一个 Shadow root 附加到一个 Custom element 上并且将 mode 设置为 closed那么就不可以从外部获取 Shadow DOM 了——myCustomElem.shadowRoot 将会返回 null。浏览器中的某些内置元素就是如此例如video包含了不可访问的 Shadow DOM。 如果你想将一个 Shadow DOM 附加到 custom element 上可以在 custom element 的构造函数中添加如下实现目前这是 shadow DOM 最实用的用法 let shadow this.attachShadow({ mode: open }); 将 Shadow DOM 附加到一个元素之后就可以使用 DOM APIs 对它进行操作就和处理常规 DOM 一样。 var para document.createElement(p);
shadow.appendChild(para);
etc. 注意 要使用 Chrome 调试器检查 Shadow DOM需要选中调试器的 Preferences / Elmenets 下的 show user agent shadow DOM 框*比如对于上文提到的 video在打开该调试选项后就能在元素面板中看到 video 下挂载的 shadow tree一些比较旧的资料中会出现 attachShadow() 的前身 createShadowRoot()语义基本相同createShadowRoot()已经被废弃它是在 Shadow DOM v0 规范中引入的。Shadow DOM 的最新版本是 v1是 Web 标准的一部分。 HTML templates 和 slot template 元素允许开发者在 HTML 中定义一个模板其中可以包含任意的 HTML 结构、文本和变量占位符。此元素及其内容不会在 DOM 中呈现但仍可使用 JavaScript 去引用它。 template idmy-paragraphpMy paragraph/p
/template 上面的代码不会展示在你的页面中直到你用 JavaScript 获取它的引用然后添加到 DOM 中如下面的代码 let template document.getElementById(my-paragraph);
let templateContent template.content;
document.body.appendChild(templateContent); 模板Template本身就是有用的而与 web 组件web component一起使用效果更好。我们定义一个 web 组件使用模板作为阴影shadowDOM 的内容叫它 my-paragraph customElements.define(my-paragraph,class extends HTMLElement {constructor() {super();let template document.getElementById(my-paragraph);let templateContent template.content;const shadowRoot this.attachShadow({ mode: open });shadowRoot.appendChild(templateContent.cloneNode(true));}},
); 使用 slot 则能进一步展示不同的自定义内容 template idmy-paragraphpslot namemy-textMy default text/slot/p
/template ... my-paragraphul slotmy-textliLets have some different text!/liliIn a list!/li/ul
/my-paragraph CSS Scoping局部作用域的 CSS The CSS scoping module defines the CSS scoping and encapsulation mechanisms, focusing on the Shadow DOM scoping mechanism. 根据 Shadow DOM 作用域机制CSS scoping 模块定义了 CSS 作用域和封装机制 CSS styles are either global in scope or scoped to a shadow tree. Globally scoped styles apply to all the elements in the node tree that match the selector, including custom elements in that tree, but not to the shadow trees composing each custom element. Selectors and their associated style definitions dont bleed between scopes. CSS 样式分为全局和 shadow tree 局部两种。全局样式应用于节点树中与选择器匹配的所有元素包括该树中的自定义元素但不应用于组成每个自定义元素的shadow tree。选择器及其关联的样式定义也不会在作用域之间流通。 Within the CSS of a shadow tree, selectors dont select elements outside the tree, either in the global scope or in other shadow trees. Each custom element has its own shadow tree, which contains all the components that make up the custom element (but not the custom element, or host, itself). 在 shadow tree 的 CSS 中选择器不会影响树外部的元素 -- 无论是全局作用域还是其他 shadow tree。每个自定义元素都有自己的 shadow tree它包含组成自定义元素的所有组件但不包含自定义元素或“宿主”本身。 :host 伪类 在 shadow DOM 内部要想为“宿主” shadow host 本身添加样式可以用 CSS 选择器 :host :host {/* ... */
} :host 选择器还有一种函数式的用法接收一个选择器参数该参数表示 shadow host 本身具备特定的状态或样式时才生效如 :host(:hover) {background-color: #ccc;
}:host(.active) {color: red;
}:host(.footer) { // 宿主元素包含footer样式名时color : red;
} :host-context 伪类 与 :host(selector) 用法类似的还有 :host-context() 伪类但所谓 context 的语意指的是作为其参数的选择器指向的是 shadow host 宿主元素的上下文环境也就是其作为哪个祖先元素的后代时才生效如 // 当宿主是 h1 后代时
:host-context(h1) {font-weight: bold;
}// 当 .dark-theme 类应用于主文档 body 时
:host-context(body.dark-theme) p {color: #fff;
} ::part 伪元素 用于在父页面指定 shadow DOM 内部使用了对应 part 属性元素的样式 html
headtemplate idtemplateMy host element!span partspxxx/span/templatestyle#host::part(sp) {background-color: aqua;}/style
/head
bodydiv idhost/divscript typetext/javascriptvar template document.querySelector(#template)var root document.querySelector(#host).attachShadow({ mode: open });root.appendChild(template.content);/script
/body
/html ::part() 在遵循 Shadow DOM 封装性的同时提供了一个安全指定内部样式的途径。 但这不是唯一的手段另一种“穿透”方法是通过 CSS 自定义变量 html
headtemplate idtemplatestylespan {background-color: var(--sp-color, red);}/styleMy host element will have a blue border!span partspxxx/span/templatestyle#host {--sp-color: blue; // 生效}/style
/head
bodydiv idhost/divscript typetext/javascriptvar template document.querySelector(#template)var root document.querySelector(#host).attachShadow({ mode: open });root.appendChild(template.content);/script
/body
/html ::slotted 伪元素 在自定义组件内部指定该样式后仅有 被外部成功填充的slot 才会被匹配到使用默认值的 slot 上则不会生效。 优先级 对于“宿主”元素外部样式优先级高于内部的 :host如果要覆盖父页中设置的样式则必须在宿主元素上内联完成外部 ::part 样式优先级高于内部定义 观察以下例子优先级 blur green red: headtemplate idtemplatestyle:host {border: 1px solid red;padding: 10px;line-height: 50px;}/styleMy host element will have a blue border!/templatestyle#host {border-color: green;}/style
/head
bodydiv idhost styleborder-color: blue;/divscript typetext/javascriptvar template document.querySelector(#template)var root document.querySelector(#host).attachShadow({ mode: open });root.appendChild(template.content);/script
/body Event retargeting事件的重定向 当 shadow DOM 中发生的事件在外部被捕获时将会以其 host 元素作为目标。 user-card/user-cardscript
customElements.define(user-card, class extends HTMLElement {connectedCallback() {this.attachShadow({mode: open});this.shadowRoot.innerHTML pbuttonClick me/button/p;this.shadowRoot.firstElementChild.onclick e alert(Inner target: e.target.tagName);}
});document.onclick e alert(Outer target: e.target.tagName);
/script打印出
Inner target: BUTTON
Outer target: USER-CARD 外部文档并不需要知道自定义组件的内部情况 -- 从它的角度来看事件总是发生在自定义组件上除非事件发生在 slot 的元素上。 user-card iduserCard
span slotusernameJohn Smith/span
/user-cardscript
customElements.define(user-card, class extends HTMLElement {connectedCallback() {this.attachShadow({mode: open});this.shadowRoot.innerHTML divbName:/b slot nameusername/slot/div;this.shadowRoot.firstElementChild.onclick e alert(Inner target: e.target.tagName);}
});userCard.onclick e alert(Outer target: ${e.target.tagName});
/script打印出
Inner target: BUTTON
Outer target: SPAN 从 Shadow DOM 内部触发事件 如果要发送自定义事件可以使用 CustomEvent注意要设置冒泡和 composed this._shadowRoot.dispatchEvent(new CustomEvent(weather-fetched, {bubbles: true,composed: true,detail: json,})
); HTML imports Web Component 标准中被废弃的一个草案有开源替代方案用于引入自定义组件的结构和完整定义从而可以直接在主页面 html 中引用 link relimport hrefmodule-my-comp.htmlmy-comp / Web Component 开发框架 除了原生开发方法社区中大量既有/特有开发语言都可以转译为 Web Component Polymer Google 推出的 Web Components 库支持数据的单向和双向绑定兼容性较好跨浏览器性能也较好在语法层面Polymer 也最接近 Web Components 的原生语法。 import { PolymerElement, html } from polymer/polymer/polymer-element.js;
import polymer/iron-icon/iron-icon.js; // 一个图标库class IconToggle extends PolymerElement {static get template() {return htmlstyle:host {display: inline-block;}iron-icon {fill: var(--icon-toggle-color, rgba(0,0,0,0));stroke: var(--icon-toggle-outline-color, currentcolor);}:host([pressed]) iron-icon {fill: var(--icon-toggle-pressed-color, currentcolor);}/style!-- shadow DOM goes here --iron-icon icon[[toggleIcon]]/iron-icon;}static get properties () {return {toggleIcon: {type: String},pressed: {type: Boolean,notify: true,reflectToAttribute: true,value: false}};}constructor() {super();this.addEventListener(click, this.toggle.bind(this));}toggle() {this.pressed !this.pressed;}
}customElements.define(icon-toggle, IconToggle); Lit Google 在 2019 年宣布停止对 Polymer 的进一步开发转向支持 Web Components 规范更好的 Lit这也是目前社区中被推荐较多的一个 The Polymer library is in maintenance mode. For new development, we recommend Lit. -- Google import {html, css, LitElement} from lit;
import {customElement, property} from lit/decorators.js;customElement(simple-greeting)
export class SimpleGreeting extends LitElement {static styles cssp { color: blue };property()name Somebody;render() {return htmlpHello, ${this.name}!/p;}
} simple-greeting nameWorld/simple-greeting React react 在 v17 版本之后增加了对于在 React 组件中使用 web component 的支持 If you render a tag with a dash, like, React will assume you want to render a custom HTML element. In React, rendering custom elements works differently from rendering built-in browser tags: All custom element props are serialized to strings and are always set using attributes. Custom elements accept class rather than className, and for rather than htmlFor. If you render a built-in browser HTML element with an is attribute, it will also be treated as a custom element. import React, { useState } from react;
import ./alert.js;export default function App() {const [show, setShow] useState(true);return (divbutton onClick{() setShow(!show)}toggle alert/buttonx-alert hidden{show} statussuccess closable oncloseChange{() setShow(!show)}This is a Web Component in React/x-alert/div);
} 而如果想将标准 react 组件包装为 web component可以在 react 工程中直接结合 web component 原生语法、使用 React 完成节点渲染并导出成独立组件。 比如 Github上这个例子 import * as React from react;
import * as ReactDom from react-dom;
import { FetchData } from ./fetch-data;class StandaloneComponent extends HTMLElement {mountPoint!: HTMLSpanElement;name!: string;connectedCallback() {const mountPoint document.createElement(span);this.attachShadow({ mode: open }).appendChild(mountPoint);const name this.getAttribute(name);if (name) {ReactDom.render(FetchData name{name} /, mountPoint);} else {console.error(You must declare a name!);}}
}
export default StandaloneComponent;window.customElements.get(standalone-component) ||window.customElements.define(standalone-component, StandaloneComponent); 另一种更方便的方式是依靠 react 社区中的工具常见的如 react-web-componentdireflowreact-shadow-rootreact-to-web-component import r2wc from r2wc/react-to-web-component;
import Checklist from ./components/checklist/Checklist;const wcChecklist r2wc(Checklist, { props: { items: json } });customElements.define(r2w-checklist, wcChecklist); Vue3 Polymer 是另一个由谷歌赞助的项目事实上也是 Vue 的一个灵感来源。Vue 的组件可以粗略的类比于 Polymer 的自定义元素并且两者具有相似的开发风格。最大的不同之处在于Polymer 是基于最新版的 Web Components 标准之上并且需要重量级的 polyfills 来帮助工作 (性能下降)浏览器本身并不支持这些功能。相比而言Vue 在支持到 IE9 的情况下并不需要依赖 polyfills 来工作。 ... Vue implements a content distribution API inspired by the Web Components spec draft, using the slot element to serve as distribution outlets for content. -- vue2官方文档 源自 Vue 2.x 时代对 Web Components 的关注Vue 3 更进一步原生支持了将 Vue 3 组件导出为 Web Components Vue 提供了一个和定义一般 Vue 组件几乎完全一致的 defineCustomElement 方法来支持创建自定义元素。这个方法接收的参数和 defineComponent 完全相同。但它会返回一个继承自 HTMLElement 的自定义元素构造器 my-vue-element/my-vue-element import { defineCustomElement } from vueconst MyVueElement defineCustomElement({// 这里是同平常一样的 Vue 组件选项props: {},emits: {},template: ...,// defineCustomElement 特有的注入进 shadow root 的 CSSstyles: [/* inlined css */]
})// 注册自定义元素
// 注册之后所有此页面中的 my-vue-element 标签
// 都会被升级
customElements.define(my-vue-element, MyVueElement)// 你也可以编程式地实例化元素
// 必须在注册之后
document.body.appendChild(new MyVueElement({// 初始化 props可选})
) ... 官方的 SFC 工具链支持以“自定义元素模式”导入 SFC (需要 vitejs/plugin-vue^1.4.0 或 vue-loader^16.5.0)。一个以自定义元素模式加载的 SFC 将会内联其 style 标签为 CSS 字符串并将其暴露为组件的 styles 选项。这会被 defineCustomElement 提取使用并在初始化时注入到元素的 shadow root 上。 要开启这个模式只需要将你的组件文件以 .ce.vue 结尾即可 import { defineCustomElement } from vue
import Example from ./Example.ce.vueconsole.log(Example.styles) // [/* 内联 css */]// 转换为自定义元素构造器
const ExampleElement defineCustomElement(Example)// 注册
customElements.define(my-example, ExampleElement) 在 Vue 3 中使用其他 Web Component 同样简单根据编译环境是浏览器、vite 或是 vue cli 等设置其 isCustomElement 配置函数为 (tag) tag.includes(-) 后基本就能正常使用了详见官方文档。 Vue 2 Vue 2 中并不具备 Vue 3 中 defineCustomElement 那样的方法。 webpack 对于大部分基于原生 webpack 的 Vue 2 项目可以用开源插件 vue-custom-element 达到和 defineCustomElement 类似的效果如 Vue.customElement(widget-vue, MyVueComponent, {shadow: true,beforeCreateVueInstance(root) {const rootNode root.el.getRootNode();if (rootNode instanceof ShadowRoot) {root.shadowRoot rootNode;} else {root.shadowRoot document.head;}return root;},
}); Vue CLI 而在由 Vue CLI 构建的 Vue 项目中可以通过为构建命令指定 --target wc 参数从而将一个单独的入口构建为一个 Web Components 组件 vue-cli-service build --target wc --name my-element [entry] entry 应该是一个 *.vue 文件。Vue CLI 将会把这个组件自动包裹并注册为 Web Components 组件无需在 main.js 里自行注册在 Web Components 模式中Vue 是外置的。这意味着包中不会有 Vue即便你在代码中导入了 Vue。这里的包会假设在页面中已经有一个可用的全局变量 Vue该构建将会产生一个单独的 JavaScript 文件 (及其压缩后的版本) 将所有的东西都内联起来当这个脚本被引入网页时会注册自定义组件其使用 vue/web-component-wrapper 包裹目标 Vue 组件并自动代理属性、特性、事件和插槽也可以设置构建命令打包多个组件或异步组件 script srchttps://unpkg.com/vue/script
script srcpath/to/my-element.js/script!-- 可在普通 HTML 中或者其它任何框架中使用 --
my-element/my-element 实例用异构系统共建 web components https://gitee.com/tonylua/web-component-test1/tree/master 总结 正如以 Flash 为代表的 RIA 技术浪潮极大地刺激了浏览器厂商从而加速了浏览器的进步并催生了 ES5/ES6 的落地同样Angular/React/Vue 等前端组件化开发框架的普及也让原生的 Web Components 标准不断发展。 Web Components 搭配的 shadow DOM 封装等实用特性让一直困扰开发者们的样式局部化和事件隔离等问题迎刃而解。 随着现代浏览器兼容性的不断改善和各种开发框架对 Web Components 的主动拥抱也势必会在不久的将来打破前端开发技术栈之间的壁垒让整个社区沉淀的服务和能力迎来一次大的整合。 参考资料 http://w3c-html-ig-zh.github.io/webcomponents/spec-zh/shadow/https://javascript.info/webcomponents-introhttps://www.webcomponents.org/introductionhttps://juejin.cn/post/7072715334519619598https://juejin.cn/post/7148974524795453476https://juejin.cn/post/7107856163361783816https://www.zhihu.com/question/321832109https://juejin.cn/post/7181088227531915322https://www.jitendrazaa.com/blog/salesforce/introduction-to-html-web-components/https://juejin.cn/post/7168630364246638606https://juejin.cn/post/6976557762377416718https://cn.vuejs.org/guide/extras/web-components.htmlhttps://web.dev/custom-elements-best-practices/https://github.com/stcruy/building-a-reusable-vue-web-componenthttps://www.oreilly.com/library/view/modern-javascript/9781491971420/ch05.htmlhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_componentshttps://deepinout.com/css/css-questions/417_css_what_is_the_different_between_host_host_hostcontext_selectors.htmlhttps://www.zhangxinxu.com/wordpress/2021/02/css-part-shadow-dom/https://juejin.cn/post/6923957212075261966https://web.dev/custom-elements-best-practices/https://www.abeautifulsite.net/tags/web%20components/https://juejin.cn/post/7010595352550047752https://dev.to/nurlan_tl/tips-to-create-web-components-using-vue-3-ts-vite-3a7ahttps://itnext.io/react-and-web-components-3e0fca98a593https://www.bitovi.com/blog/how-to-create-a-web-component-with-create-react-app
