web component
2020-07-05 本文已影响0人
_听风细雨
最近因为工作需要开发插件，接触到了web component(原生的功能)。web component可以自定义元素，方便代码复用。现在主流的框架angular,react都支持打包成web component自定义组件的形式。也就是说用某一种框架开发的组件打包成web component后可以在其他项目中进行使用。这样插件开发可以不用考虑原项目用的什么技术，插件都可以支持，也就实现了多个项目的功能复用。下面是web component的简单demo，后面有机会会写一些有关于插件的。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 传递给子组件的值 */
web-component{
--color:red;
}
</style>
<body>
<h3 id="h3">自定义组件</h3>
<template id="myTemplate">
<div>
通过template定义的元素不会直接显示在页面上。
</div>
<slot name="mySlot">插槽自定义内容。</slot>
<p>
设置css。
</p>
</template>
<web-component name="默认值">
<div slot="mySlot">向插槽传递内容。</div>
</web-component>
</body>
<script>
// 监听子组件传递的数据
document.querySelector('web-component').addEventListener('custom', e => console.log('message from event:', e.detail.message));
</script>
<script src="./index.js"></script>
</html>
index.css
p{
/* 接收父组件传递过来的值。 */
color: var(--color);
}
/* 设置默认值 */
:host{
--color:blue;
}
index.js
class WebComponent extends HTMLElement{
constructor(){
super();
// 通过attachShadow自定义的元素不会受外部css样式的影响，也不会影响到外部的css。
//mode设置为open可以通过DOM节点的方式进行获取，设置为close不可以。
const shadow = this.attachShadow({mode:"open"});
const template = document.getElementById("myTemplate");
const templateContent = template.content;
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "./index.css";
shadow.appendChild(link);
shadow.appendChild(templateContent.cloneNode(true));
}
// 配置监听的属性，否则不会触发attributeChangedCallback
static get observedAttributes() {
return ['name'];
}
// 自定义组件的生命周期
connectedCallback() {
console.log("自定义元素被插入到DOM文档。");
// 向父组件传递数据。
this.dispatchEvent(new CustomEvent('custom', {
detail: { message: 'a custom event' }
}));
}
disconnectedCallback() {
console.log("自定义元素被移除。");
}
adoptedCallback() {
console.log("当自定义元素被移动到新的文档时被调用。");
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(name,oldValue,newValue);
console.log("传递给自定义元素的属性改变。");
}
}
// 自定义元素采用-拼接的形式，是为了与原生html元素进行区分
customElements.define("web-component",WebComponent);
