我嘗試使用 VuedefineCustomElement()創建自定義元素，但由于某種原因，子組件樣式未包含在陰影根中。
然后我嘗試使用本機Element.attachShadow()API而不是使用defineCustomElement()（基于Codesandbox）手動創建我的影子根，但是根本沒有加載任何樣式：
代碼：main.js：
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
let treeHead = document.querySelector("#app");
let holder = document.createElement("div");
let shadow = treeHead.attachShadow({ mode: "open" });
shadow.appendChild(holder);
createApp(App).use(store).use(router).mount(holder);
代碼 vue.config.js：
module.exports = {
chainWebpack: (config) => {
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap((options) => {
options.shadowMode = true;
return options;
});
config.module
.rule("css")
.oneOf("vue-modules")
.use("vue-style-loader")
.tap((options) => {
options.shadowMode = true;
return options;
});
config.module
.rule("css")
.oneOf("vue")
.use("vue-style-loader")
.tap((options) => {
options.shadowMode = true;
return options;
});
},
};
代碼 package.json：
{
"name": "shadow-root",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"vue": "^3.2.20",
"vue-loader": "^16.8.2",
"vue-router": "^4.0.0-0",
"vue-style-loader": "^4.1.3",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
如何在影子根中創建具有所有樣式的自定義元素？
uj5u.com熱心網友回復：
該 Vue 配置在 Vue 3 中不是必需的。只有 Vue 2 中的開發服務器需要它來呈現自定義元素中的樣式。
Vue 3.2 添加了defineCustomElement()，可用于定義自定義元素。但是，在使用defineCustomElement()( @vuejs/vue-next#4462)時存在一個未解決的問題，其中根本不呈現嵌套組件樣式。解決方法是將子組件樣式復制到根組件的影子根中，如此實用程式函式中所示（我們將在下面使用）：
// defineCustomElementWithStyles.js
import { defineCustomElement as VueDefineCustomElement, h } from 'vue'
const getStylesRecursively = (component) => {
const customElementStyles = []
if (component.styles) {
customElementStyles.push(...component.styles)
}
const childComponents = component.components
if (childComponents) {
Object.keys(childComponents).forEach((name) => {
const styles = getStylesRecursively(childComponents[name])
customElementStyles.push(...styles)
})
}
return customElementStyles
}
export const defineCustomElement = (component) =>
VueDefineCustomElement({
styles: getStylesRecursively(component),
render: () => h(component),
})
編輯public/index.html以<div id="app">使用自定義元素（例如，名為“ app-root”）替換：
前：
// public/index.html
<body>
<div id="app"></div>
</body>
后：
// public/index.html
<body>
<app-root id="app"></app-root>
</body>
而不是createApp()，用于defineCustomElement()創建應用程式的自定義元素。也重命名.vue檔案，以.ce.vue使他們的風格被復制到影子根。
前：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
后：
// main.js
import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.ce.vue'
customElements.define('app-root', defineCustomElement(App))
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344809.html
標籤：javascript Vue.js 网络包 Vuejs3 影子领域
上一篇：如何拼接多個陣列元素并相應插入？
下一篇：我想更改音頻源onClick