Shadow DOM举例

news/2025/2/3 22:37:02 标签: 前端, 服务器, javascript

这东西具有隔离效果,对于一些插件需要append一些div倒是不错的选择

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>演示例子</title>
</head>
<body>
<style>
p{color:#38f !important;}
.box{color:#1ff !important;}
</style>

<p>看看颜色</p>
<div class="box">继续看看颜色</div>
<div id="shadow">影子节点</div>
<script>
// 获取宿主元素
const hostElement = document.querySelector('#shadow');

// 创建一个 Shadow Root
const shadowRoot = hostElement.attachShadow({ mode: 'closed' });
// 添加一些样式和内容到 Shadow Root
shadowRoot.innerHTML = `
  <style>
    p {
      color: #f1f;
    }
  </style>
  <p>This is inside Shadow DOM</p>
`;
</script>
</body>
</html>


http://www.niftyadmin.cn/n/5841080.html

相关文章

系统URL整合系列视频一(需求方案)

视频 系统URL整合系列视频一&#xff08;需求方案&#xff09; 视频介绍 &#xff08;全国&#xff09;某大型分布式系统Web资源URL整合需求实现方案讲解。当今社会各行各业对软件系统的web资源访问权限控制越来越严格&#xff0c;控制粒度也越来越细。安全级别提高的同时也增…

《 C++ 点滴漫谈: 二十五 》空指针,隐秘而危险的杀手:程序崩溃的真凶就在你眼前!

摘要 本博客全面解析了 C 中指针与空值的相关知识&#xff0c;从基础概念到现代 C 的改进展开&#xff0c;涵盖了空指针的定义、表示方式、使用场景以及常见注意事项。同时&#xff0c;深入探讨了 nullptr 的引入及智能指针在提升代码安全性和简化内存管理方面的优势。通过实际…

【华为OD-E卷 - 最大矩阵和 100分(python、java、c++、js、c)】

【华为OD-E卷 - 最大矩阵和 100分&#xff08;python、java、c、js、c&#xff09;】 题目 给定一个二维整数矩阵&#xff0c;要在这个矩阵中选出一个子矩阵&#xff0c;使得这个子矩阵内所有的数字和尽量大&#xff0c;我们把这个子矩阵称为和最大子矩阵&#xff0c;子矩阵的…

uv 安装包

是的&#xff0c;你可以使用 uv 来安装 Python 包。uv 是一个高性能的 Python 包安装器和解析器&#xff0c;由 astral.sh 团队开发&#xff0c;旨在替代 pip 和 pip-tools&#xff0c;提供更快的包安装体验。 ### 如何使用 uv 安装包 1. **安装 uv**&#xff1a; 如果你还…

穷举vs暴搜vs深搜vs回溯vs剪枝系列一>单词搜索

题解如下 题目&#xff1a;解析决策树&#xff1a;代码设计&#xff1a; 代码&#xff1a; 题目&#xff1a; 解析 决策树&#xff1a; 代码设计&#xff1a; 代码&#xff1a; class Solution {private boolean[][] visit;//标记使用过的数据int m,n;//行&#xff0c;列char…

MySQL的GROUP BY与COUNT()函数的使用问题

在MySQL中&#xff0c;GROUP BY和 COUNT()函数是数据聚合查询中非常重要的工具。正确使用它们可以有效地统计和分析数据。然而&#xff0c;不当的使用可能会导致查询结果不准确或性能低下。本文将详细讨论 GROUP BY和 COUNT()函数的使用方法及常见问题&#xff0c;并提供相应的…

【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】2.6 广播机制核心算法:维度扩展的数学建模

2.6 广播机制核心算法&#xff1a;维度扩展的数学建模 目录/提纲 #mermaid-svg-IfELXmhcsdH1tW69 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IfELXmhcsdH1tW69 .error-icon{fill:#552222;}#mermaid-svg-IfELXm…

ELECTRA:作为判别器而非生成器的预训练文本编码器

摘要 诸如BERT之类的掩码语言建模&#xff08;MLM&#xff09;预训练方法通过将某些标记替换为[MASK]来破坏输入&#xff0c;然后训练模型以重建原始标记。尽管这些方法在下游自然语言处理&#xff08;NLP&#xff09;任务中表现良好&#xff0c;但它们通常需要大量的计算资源…