【HTML】Shadow DOM

news/2024/12/23 20:31:37 标签: html, 前端

Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中。它以 shadow root 节点为起始根节点,在这个根节点的下方,可以是任意元素,和普通的 DOM 元素一样。这样,你就可以创建一个独立的 DOM 子树,它与主文档隔离开来,拥有自己的样式和脚本

隔离性很强,但是不太好用,api比较反人类。

Shadow DOM 的一个重要用途是封装。它允许组件拥有自己的“影子” DOM 树,这个树不能被主文档意外访问,可以有本地样式规则等。这样,你就可以创建一个组件,它的内部结构、样式和行为都被隐藏起来,与页面上其他部分隔离开来,避免冲突。¹

应用场景: web components, 微信小程序


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

相关文章

苍穹外卖-day05redis 缓存的学习

苍穹外卖-day05 课程内容 Redis入门Redis数据类型Redis常用命令在Java中操作Redis店铺营业状态设置 学习目标 了解Redis的作用和安装过程 掌握Redis常用的数据类型 掌握Redis常用命令的使用 能够使用Spring Data Redis相关API操作Redis 能够开发店铺营业状态功能代码 功能实…

青少年编程与数学 02-004 Go语言Web编程 15课题、表单处理

青少年编程与数学 02-004 Go语言Web编程 15课题、表单处理 一、表单二、表单处理步骤 1: 创建表单(HTML)步骤 2: 编写表单处理函数(Go) 三、重要性 课题摘要:本文讨论了Web应用中表单处理的重要性和实现步骤。表单处理包括创建表单…

D102【python 接口自动化学习】- pytest进阶之fixture用法

day102 pytest的usefixtures方法 学习日期:20241219 学习目标:pytest基础用法 -- pytest的usefixtures方法 学习笔记: fixture调用方法 实际应用 总结 pytest.mark.usefixtures(func),pytest的usefixtures方法,无…

10.1k高星 GitHub 库:告别JSON错误:Outlines如何提升大模型的结构化输出

在人工智能和大语言模型(LLM)的应用中,如何高效、可靠地从模型输出中提取结构化数据,成为了一个至关重要的课题。本篇文章将介绍 GitHub 高星开源库 Outlines,并分析它如何帮助开发者解决大模型在生成结构化数据时面临的挑战。我们将探讨大模型的非结构化输出给 AI 应用带…

XRP价格跌破2.20美元 1.94美元是否下一波牛市的关键支撑?

原文转自:XRP价格跌破2.20美元 1.94美元是否下一波牛市的关键支撑? - 币热网 - 区块链数字货币新闻消息资讯 XRP价格经历剧烈波动后强势反弹,$1.94或成新牛市关键支撑 在过去24小时内,XRP价格经历了一场过山车式的剧烈波动。价…

C++打小怪游戏

目录 开头程序Game.cppmoster.hmoster.cppM&.hM&.cppM^.hM^.cppMO.hMO.cppMX.hMX.cppM.hM.cppM_o.hM_o.cppPlayer.hPlayer.cppCmp.hCmp.cppcmpm.hcmpm.cppWASD.hWASD.cppdraw.hisvp.hmosters.h 程序的流程图主文件 开头 大家好,我叫这是我58。 程序 Game…

1、数据库概念和mysql表的管理

数据库概念 datebase:用来组织,存储,管理数据的仓库。 数据库的管理系统:DBMS(用来实现对数据的有效组织、关系和存取的系统软件) 关系型和非关系型数据库 关系型数据库:mysql、oracle 非关…

后端项目java中字符串、集合、日期时间常用方法

我这里只介绍了项目中最常用的哈,比如像集合有很多,但我们最常用的就是ArrayList。 然后我这里会以javascript中的字符串、数组的方法为基准来实现,有些方法js和java会有些区别也会介绍 字符串 每次修改 String 对象都会创建一个新的对象,而 StringBuffer 可以在同一个对象…