文章目錄
- 介紹
- 一、web Component
- 二、怎么使用
- 三、在Vue中使用
- 使用場景
前端必備工具推薦網站(免費圖床、API和ChatAI等實用工具):
http://luckycola.com.cn/
介紹
`
平常瀏覽各個網站過程中，經常遇到的一種現象：頁面廣告。
這種廣告按照來源可分為兩種：
- 1、站點自己的廣告
- 2、第三方投放的廣告
第二種需要在對代理流量的目標站點里，插入開發者想要的元素，并且與此同時要保證插入的代碼與原站點之間的影響降至最低。
因此，需要一種有效的**“隔離”**手段。
主流的方案有兩種:
- iframe方案: frame需要一個明確的src資源鏈接，而有時候我們似乎沒必要再單獨為其去發布一個資源；iframe并未實現完全的“隔離”，原有站點還是能拿到iframe節點，并可對其進行DOM操作；
- web component方案:Web Components 提供了基于原生支持的、對視圖層的封裝能力，可以讓單個組件相關的 javaScript、css、html模板運行在以html標簽為界限的局部環境中，不會影響到全局，組件間也不會相互影響 。 再簡單來說：就是提供了我們自定義標簽的能力，并且提供了標簽內完整的生命周期
一、web Component
- Shadow host：一個常規 DOM 節點，Shadow DOM 會被附加到這個節點上。
- Shadow tree：Shadow DOM 內部的 DOM 樹。
- Shadow boundary：Shadow DOM 結束的地方，也是常規 DOM 開始的地方。
- Shadow root: Shadow tree 的根節點。
二、怎么使用
1、代碼如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web Components</title>
</head>
<body><custom-btn></custom-btn><script>class MyBtn extends HTMLElement {constructor() {// 繼承父super();// 標簽模式let p = this.h('p');p.innerHTML = '我只自定義p內容啊';p.setAttribute('style', 'height:200px;width:200px;border:1px solid #ccc;background:yellow');// template模式const template = this.h('template')template.innerHTML = `<div>測試</div><style>div{height:200px;width:200px;background:blue;}</style>`// 創建shadowDom// mode 屬性，值可以是 open 或者 closed,// open 表示可以通過頁面內的 JavaScript 方法來獲取 Shadow DOM，例如使用 Element.shadowRoot 屬性：// 如果你將一個 Shadow root 附加到一個 Custom element 上，并且將 mode 設置為 closed，那么就不可以從外部獲取 Shadow DOM 了——myCustomElem.shadowRoot 將會返回 null。瀏覽器中的某些內置元素就是如此，例如<video>，包含了不可訪問的 Shadow DOM。let showDow = this.attachShadow({mode: 'open'});console.log('showDow:', showDow);// 插入標簽showDow.appendChild(p);// 插入模版showDow.appendChild(template.content.cloneNode(true));};h(tag) {return document.createElement(tag);}/*** 生命周期*///當自定義元素第一次被連接到文檔 DOM 時被調用。connectedCallback () {console.log('我已經插入了！！！')}//當自定義元素與文檔 DOM 斷開連接時被調用。disconnectedCallback () {console.log('我已經斷開了！！！')}//當自定義元素被移動到新文檔時被調用adoptedCallback () {console.log('我被移動了！！！')}//當自定義元素的一個屬性被增加、移除或更改時被調用attributeChangedCallback () {console.log('我被改變了！！！')}}window.customElements.define('custom-btn', MyBtn)</script>
</body>
</html>
2、效果展示：
三、在Vue中使用
1、第一步:defineCustomElement
代碼如下（示例）：
/*vite config ts 配置*/
vue({template:{compilerOptions:{isCustomElement:(tag)=> tag.includes('xiaoman-')}}2、第二步:父組件 中使用
<template><div><custom-btn :title=" JSON.stringify(name) "></xiaoman-btn></div>
</template><script setup lang='ts'>
import { ref, reactive, defineCustomElement } from 'vue'
//自定義元素模式 要開啟這個模式，只需要將你的組件文件以 .ce.vue 結尾即可
import customVueVue from './components/custom-vue.ce.vue'
const Btn = defineCustomElement(customVueVue)
customElements.define('custom-btn', Btn)const name = ref({a:1})</script><style scoped lang='less'></style>
3、第二步:子組件 中使用
<template><div>test123213 {{title}}</div>
</template><script setup lang='ts'>import { ref, reactive } from 'vue'defineProps<{title:string
}>()</script><style scoped lang='less'></style>
使用場景
插入廣告場景、微前端之無界等
)
