# 基于webCompents的跨技术组件库实践

![shadom](https://3888932816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJIFoScNWx6TyBhNr8W%2Fuploads%2Fgit-blob-abd83097129a33440768aa46f4dec4b1f7132b56%2F2022-05-14-14-39-37.png?alt=media)

什么是ShadowDOM

它是影子dom 跟外界互不干扰 ![](https://3888932816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJIFoScNWx6TyBhNr8W%2Fuploads%2Fgit-blob-cac73ee220f4449d6bfeae7dd147b79ba64cc549%2F2022-05-14-14-44-19.png?alt=media)

\| initialization | mounted | update | unmount | ---- | ---- | | constructor | connectedCallback | attributeChangedCallback | disconnectedCallback | 组件创建时调用，通常在该生命周期生成DOM结构 | 当自定义元素第一次被连接到文档dom时被调用。通常在该生命周期更新dom元素 | 当自定义元素的一个属性被增加、移除或更改时被调用。通常在该生命周期更新dom元素 | 当自定义元素与文档dom断开连接时被调用。通常在该生命周期移除副作用

## DOM Property & DOM Atrribute

## [https://v3.cn.vue.js.org/guide/web-components.html#definecustomelement](https://v3.cn.vue.js.org/guide/web-components.html#definecustomelement)

## [https://developer.mozilla.org/zh-CN/docs/Web/API/CustomElementRegistry/define](https://developer.mozilla.org/zh-CN/docs/Web/API/CustomElementRegistry/define)

## [https://developer.google.com/web/fundamentals/web-components/best-practices#lifecycle-callbacks](https://developer.google.com/web/fundamentals/web-components/best-practices#lifecycle-callbacks)

DOM Property 转成 Dom Attribute ![](https://3888932816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJIFoScNWx6TyBhNr8W%2Fuploads%2Fgit-blob-c5717ef73dd5b5bf087b2f38a48c43e768326930%2F2022-05-14-16-00-36.png?alt=media)

弊端：

![](https://3888932816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJIFoScNWx6TyBhNr8W%2Fuploads%2Fgit-blob-e3d7b8ae1ab7726979f58549d7deaa223a7e8a28%2F2022-05-14-16-05-29.png?alt=media)

quarkElement 是基于preact

![](https://3888932816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJIFoScNWx6TyBhNr8W%2Fuploads%2Fgit-blob-2b667999f5f8ef294966890209d0fbfc24277de8%2F2022-05-14-16-13-55.png?alt=media)

质量追踪 ![](https://3888932816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJIFoScNWx6TyBhNr8W%2Fuploads%2Fgit-blob-c2ee544c42758d7aa114e414dba49abac8e7a560%2F2022-05-14-18-06-11.png?alt=media)
