参考文章 https://cloud.tencent.com/developer/article/1965869
handleDetailData() {
this.content = `
<style>
${markdown.style}
</style>
${this.content}
`;
// 使用示例
const containerElement = document.querySelector('.article-detail')
this.createArticleComponent(containerElement, this.content);
},
createArticleComponent(domElement, htmlContent) {
// 创建一个 Shadow DOM
const shadow = domElement.attachShadow({ mode: 'open' });
// 将传入的 HTML 字符串添加到 Shadow Root 上
shadow.innerHTML = htmlContent;
},
// 处理类名需要加 :host 才可以生效样式
// 标签可以直接使用
:host > .hljs-center{
text-align: center;
}
标签:domElement,DOM,样式,containerElement,content,html,Shadow
From: https://www.cnblogs.com/brujie/p/17914425.html