首页 > 其他分享 >Shadow DOM处理html渲染,样式隔离

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

时间:2023-12-19 18:44:52浏览次数:21  
标签:domElement DOM 样式 containerElement content html Shadow

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

相关文章

  • html标签里面修改title样式
    默认的title不能设置样式,但我们可以通过js和css实现title的功能。CSS样式:<style>/*修改提示框*/#mytitle{position:absolute;color:#ffffff;max-width:160px;font-size:14px;padding:4px;background:rgba(......
  • html颜色代码
    1白色#FFFFFFFF2红色#FFFF00003绿色#FF00FF004蓝色#FF0000FF5牡丹红#FFFF00FF6青色#FF00FFFF7黄色#FFFFFF008黑色#FF0000009海蓝#FF70DB9310巧克力色......
  • Two-Colored Dominoes 题解
    前言看了这道题的几篇题解,感觉讲的方法都比较麻烦,这里讲一个感觉比较简单的方法。思路首先判断是否有解。计算一下每一行和每一列的牌的数量,只要有一个是奇数就无解,否则有解。证明显然,偶数一定可以分成两组,在纸上模拟一下也可以得出。其次看如何构造。对于竖着的牌,显然只对每......
  • 做一个wiki页面是体验HTML语义的好方法
    HTML语义:如何运用语义类标签来呈现Wiki网页在上一篇文章中,我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么,哪些场景适合用到语义类标签呢,又如何运用语义类标签呢?不知道你还记不记得在大学时代,你被导师逼着改毕业论文格式的情景,如果你回想一下,你在论文中使......
  • 35道HTML高频题整理(附答案背诵版)
    1、简述HTML5新特性?HTML5是HTML的最新版本,它引入了很多新的特性和元素,以提供更丰富的网页内容和更好的用户体验。以下是一些主要的新特性:语义元素:HTML5引入了新的语义元素,像<article>,<section>,<nav>,<header>,<footer>,<aside>等。这些元素可以帮助更好地描述......
  • HTML表格基础
    HTML表格基础一、表格相关标签<table></table>:表格相关的内容都需要包含在该标签内。<tr></tr> :tablerow的缩写,创建一行。<td></td>:tabledata的缩写,创建一行中的一列。<th></th>:tablehead的缩写,类似<td></td>,创建一行中的一列,用于表头的标题内容。<cap......
  • Python: Random
     #encoding:utf-8#版权所有2023涂聚文有限公司#许可信息查看:#描述:https://docs.python.org/3/library/string.html#Author:geovindu,GeovinDu涂聚文.#IDE:PyCharm2023.1python3.11#Datetime:2023/12/1718:16#User:geovindu#P......
  • random模块
    random模块【一】导入模块importrandom【二】随机小数(1)默认区间的小数(random)importrandom#默认是大于0且小于1之间的小数num=random.random()print(num)#0.50082157211298(2)指定区间的小数(uniform)importrandom#指定为0到5之间的随机小数res=random.u......
  • ​Vue虚拟DOM:如何提高前端开发效率
    前言随着前端技术的不断发展,越来越多的框架和库涌现出来,其中Vue.js成为了最受欢迎的前端框架之一。Vue.js采用了响应式数据绑定和组件化的思想,让开发者可以更加高效地构建交互式的用户界面。而Vue.js的底层原理涉及到许多概念和技术,其中虚拟DOM是Vue.js的核心概念之一。本篇文章将......
  • random模块
    random模块【一】导入模块importrandom【二】随机小数(1)默认区间的小数(random)importrandom#默认是大于0且小于1之间的小数num=random.random()print(num)#0.50082157211298(2)指定区间的小数(uniform)importrandom#指定为0到5之间的随机小数res=random.u......