Safari 支持声明式 Shadow DOM


Safari 技术预览版 162 宣布开始支持声明式 Shadow DOM (Declarative Shadow DOM),并将默认启用,以便开发者在禁用 JavaScript,或采用服务器端渲染技术时,也能使用 Shadow DOM。

Shadow DOM 属于 Web Components 中的三个主要技术之一,其他两个技术是自定义元素和 HTML 模板。Web Components 的出现,是为了让开发者创建可在网页上重复使用的自定义小工具和元件,目前 Web Components 的所有技术都已经被整合到 DOM 和 HTML 标准中,被主流浏览器支持。

而在声明式 Shadow DOM 的支持上,Chromium 系列浏览器的进度最快,早在 Chromium 90 支持就已开始,Safari 的浏览器引擎 Webkit 则是一直到现在才开始在技术预览版中支持。Webkit 官方解释了必须支持声明式 Shadow DOM 的原因。

所谓 Shadow DOM,是为 DOM 树提供一个轻量级封装,因此开发者便可以在元素上创建一个平行的树,该树被称为影子树 (Shadow Tree),由于影子树与主要文件的 DOM 树分开渲染,能够在不修改主要 DOM 树的前提下,取代该元素的渲染,因此元素功能可以被脚本化和自定义化,而不需要担心和文件的其他部分冲突。

Webkit 官方还提到,目前不少网页应用程序会使用服务器端渲染技术,而使用该技术的网站通常会在渲染初期禁用 JavaScript,以减少绘制延迟。随着脚本和相关元素的加载,才会慢慢强化内容互动性。但因为如此,这些网站便无法使用 Shadow DOM,因为 Shadow DOM 使用前提是必须调用 attachShadow(),而声明式 Shadow DOM 则是通过在 HTML 中,引入 Shadow DOM 上下文的机制,以解决这个问题。

Webkit 官方还提到,目前 DOMParser 和 innerHTML 等 JavaScript 解析器 API,都没有默认支持声明式 Shadow DOM,这是避免在现有接受任意模板内容的网站上,产生跨站脚本漏洞。

由于声明式 Shadow DOM 能够在禁用 JavaScript,以及采用服务器端渲染的情况下,提供在 HTML 中定义影子树的新方法,因此是一个重要且受开发者高度期待的功能,也备受浏览器开发商关注。主流浏览器 Chrome、Edge 和 Opera 都在 2021 年便已开始支持,Safari 在最近发布的技术预览版中默认启用,Firefox 则正在支持但尚未实现。


相關推薦

2022-06-16

tive hydration errors with Suspense。#24480 和 #24532 修复 Safari 中添加 iframe 时被忽略的setState问题。#24459 React DOM Server 将有关服务器错误的信息传递给客户端。#24551 和 #24591 允许在中止 HTML 流时提供原因。#24680 尽可

2022-04-15

览器兼容性: Firefox 52+ Chrome 49+ Edge 79+(Chromium) Safari 11+ iOS 11+ (Safari) iPadOS 13+ (Safari) Android Chrome 72+ 注意:Lexical 不支持 Internet Explorer 或旧版本的 Edge 浏览器。Lexical 目前正处于早期开发阶段,API 和包可能会发生

2023-04-15

的性能表现超越了所有浏览器,其中也包括苹果自己的 Safari 浏览器。在去年 6 月,Chrome 团队再接再厉,使 Chrome 浏览器在 Mac 上又快了 20%,得分超过 360 分。 根据 Google 昨天发布的新闻公告,Google 对其浏览器进行了几项内在

2022-07-23

直有在赞助一些知名的开源 JavaScript 框架和开发工具,以支持 Web 性能和开发者工具的发展。 近日,该基金组成员在博客中宣布又通过 Open Collective 捐赠了 50 万美元,分配给一些专注于提高 Web 性能、用户体验和开发人员体验

2023-07-26

Bing Chat 人工智能聊天机器人即将登录谷歌 Chrome 和苹果 Safari 等其他非微软浏览器中。现如今,微软方面向 TechCrunch 证实称,Bing Chat 确实正在扩展到其他浏览器,但尚未正式公告。目前只有部分受邀用户可参与测试使用。 此次

2021-11-18

TypeScript 4.5 正式版新特性: 实验性功能:在夜间版本支持  Node.js 运行 ECMAScript 模块从 node_modules 支持 lib新的 Awaited 类型和对 Promise 对象的优化模板字符串可以用作判断符引入 es2022 模块(可以在异步函

2022-09-30

gn 4.23.3 现已发布,主要变化如下: Tree showLeafIcon 属性支持自定义图标。#37144 Uploader 支持支持 Apple 图片格式: heic、heif。#37651 修复 Typography 在 copyable.tooltip=false 时,复制内容后仍然会展示提示的问题。#37754 修复 Typography e

2023-04-15

Brains 在 KotlinConf’23 大会上宣布,Compose Multiplatform 已支持 iOS,目前处于 alpha 阶段。至此,Compose Multiplatform 基本实现了全平台支持:iOS、Android、Windows、macOS、Linux 和 Web。 Compose Multiplatform 是用于跨多个平台共享 UI 的声

2022-08-31

以及 24 个已知的安全修复程序,新特性如下: 脚本和样式表上的“blocking=rendering”属性 允许将 'blocking=render' 作为属性和值放入 <script>、<style> 或样式表 <link> 使其显式呈现阻塞。主要用途是避免由于例如插入脚

2023-03-23

况下,可以为越来越丰富和苛刻的可视化场景提供持续的支持。 同时在可视化描述层面,参考了学术界的 Vega-Lite 可视化语法的设计,提高了 G2 语法的通用性和专业性,希望能给用户专递正确的、专业的可视化思维,

2024-04-16

。 传闻称,iOS 18 将为 iPhone 的 Spotlight 搜索工具、Siri、Safari、快捷指令、Apple Music、信息、健康、Numbers、Pages、Keynote 等应用带来全新的生成式 AI 功能。Gurman 此前曾报道,生成式 AI 将提升 Siri 回答复杂问题的能力,并允许信息

2023-11-28

jsoup 1.17.1 现已发布,支持 request-level 身份验证、属性名称和值源范围、stream( ) 可迭代支持以及大量其他改进和错误修复。jsoup 是一个用于处理 real-world HTML 的 Java 库。它使用最好的 HTML5 DOM 方法和 CSS 选择器提供了一

2023-07-06

桌面浏览器市场份额,主要数据如下: Chrome:61.1% Safari:14.45% Edge:10.77% Firefox:6.04% Opera:5.31% 360 Safe:0.6% …… 与上月相比,Chrome 的市场份下降了 4 个百分点。相应地,Safari、Edge、Firefox 和 Opera 的市场份额均

2022-08-24

台生成的模板不一致的问题 #12320 H5 Input 组件在 Safari 下,联想输入导致的事件触发问题 #12326 修复 prebundle 特性下,用户自定义 proxy 合并错误问题 修复 prebundle 特性下,生产环境的错误 chunkId 配置 #12279 RN