526互联

Shadow DOM处理html渲染，样式隔离

发布时间 2023-12-19 18:40:47作者: 蔚蓝Azure

参考文章 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;
 }