五分钟带你简单上手Web Components

标签：定制   containe   ntb   元素   实现   用户   生命周期   封装   增加   

  Web Components允许用户自定义一个html元素 来实现组件化、复用，

  利用该技术我们封装实现特定功能特定样式的定制元素用在我们想使用的任何地方

  目前主流框架几乎都支持该技术

  1.vue 通过Vue CLI3和新的@vue/web-component-wrapper库创建web components十分方便

  2.react 可以自由选择在 Web Components 中使用 React，或者在 React 中使用 Web Components，或者两者共存。

  1 通过customElements.define（）方法用来注册一个 custom element，该方法接受以下参数：

• 表示所创建的元素名称的符合 DOMString 标准的字符串。注意，custom element 的名称不能是单个单词，且其中必须有段划线。

• 用于定义元素行为的类（自定义类） 。

• 可选参数，一个包含 extends 属性的配置对象，是可选参数。它指定了所创建的元素继承自哪个内置元素，可以继承任何内置元素。

•  例如 window.customElements.define(‘web-com‘,webCom)    

•  如果我们想让web-com继承div元素的特性 可以这么定义window.customElements.define(‘web-com‘,webCom，{extends：p}

   2 自定义元素     

 3 template 标签    

五分钟带你简单上手Web Components

标签：定制   containe   ntb   元素   实现   用户   生命周期   封装   增加   

原文地址：https://www.cnblogs.com/ldf-zp/p/12165435.html