原生js也可以自定义组件
2021-03-02 11:27
标签：c11 OLE console ret http 生命周期 xtend oop example Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。 浏览器的api中已经支持了创建原生组件，这些组件可以是图表，表格，按钮，3d组件，并且当我们创建一次之后就可以在任意前端框架使用，并且它也像vue一样支持slot和template 实现web component的基本方法通常如下所示： 更多相关的案例可以参考https://github.com/mdn/web-components-examples 原生js也可以自定义组件 标签：c11 OLE console ret http 生命周期 xtend oop example 原文地址：https://www.cnblogs.com/yuwenxiang/p/14345325.html
和
CustomElementRegistry.define() 方法注册您的新自定义元素 ，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用通常的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">123my-element>
body>
html>