当前位置: 首页 > article >正文

Shadow DOM举例

这东西具有隔离效果,对于一些插件需要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.kler.cn/a/530278.html

相关文章:

  • 【小白学AI系列】NLP 核心知识点(六)Softmax函数介绍
  • 【背包问题】二维费用的背包问题
  • 本地部署DeepSeek教程(Mac版本)
  • 小程序项目-购物-首页与准备
  • DDD - 微服务架构模型_领域驱动设计(DDD)分层架构 vs 整洁架构(洋葱架构) vs 六边形架构(端口-适配器架构)
  • 智慧园区如何利用智能化手段提升居民幸福感与环境可持续性
  • MySQL5.5升级到MySQL5.7
  • Vue3.0实战:大数据平台可视化(附完整项目源码)
  • Alibaba开发规范_编程规约之集合框架:最佳实践与常见陷阱
  • MBTI之INFJ型人格解读,INFJ的职业倾向、人际关系和INFJ的心理健康
  • doris:主键模型的导入更新
  • 系统URL整合系列视频一(需求方案)
  • ifconfig/hostname/hosts文件等学习
  • springboot/ssm教学资源管理系统web在线课程教学视频Java代码编写
  • 一文了解制造业中的QC是什么
  • 微信登录模块封装
  • 第一性原理:游戏开发成本的思考
  • 索罗斯的“反身性”(Reflexivity)理论:市场如何扭曲现实?(中英双语)
  • 【PyQt】lambda函数,实现动态传递参数
  • 本地Deepseek添加个人知识库(Page Assist/AnythingLLM)
  • 不确定性采样在分类任务中的应用
  • 【Navicat】设置字段根据当前时间更新
  • C++模板初了解
  • Vue 2 项目中 Mock.js 的完整集成与使用教程
  • C# 继承与多态详解
  • 新到手路由器宽带上网设置八步法