标签：c11 OLE console ret http 生命周期 xtend oop example
Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。
它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。
<template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
浏览器的api中已经支持了创建原生组件，这些组件可以是图表，表格，按钮，3d组件，并且当我们创建一次之后就可以在任意前端框架使用，并且它也像vue一样支持slot和template
实现web component的基本方法通常如下所示：
CustomElementRegistry.define() 方法注册您的新自定义元素 ，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。<template> 和<slot> 定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <script type="text/javascript"> class MyElement extends HTMLElement { // called when element created constructor() { super(); //方法在整个生命周期中只会被触发一次。可以在这里初始化一些变量 } // return an array of the attribute names you want to watch for changes observedAttributes() { // 在这里返回自定义元素的属性 return [‘label‘]; } get label() { this.getAttribute(‘label‘) || ‘‘; } set label(value) { this.setAttribute(‘label‘, value); } // called when the element is added to the DOM connectedCallback() { //当组件被加到DOM上，或者节点在节点树中移动是，会被触发。 console.log(‘组件挂在到dom上‘) } // called when the element is removed from the DOM disconnectedCallback() { //当组件被从DOM上移除时触发。如果在connectedCallback中监听了事件，就一定要在这里把它移出 } // called when attribute changed attributeChangedCallback(name, oldValue, newValue) { //当组件的attribute改变时，会被触发 } } //注册自定义组件 window.customElements.define(‘my-element‘, MyElement); </script> <body> <my-element label="test">123</my-element> </body> </html>
更多相关的案例可以参考https://github.com/mdn/web-components-examples
标签：c11 OLE console ret http 生命周期 xtend oop example
原文地址：https://www.cnblogs.com/yuwenxiang/p/14345325.html
