Shadow DOM 及 Custom Elements

本文探讨了ShadowDOM和自定义元素如何改变了Web组件的创建方式。通过原生JavaScript,可以实现作用域样式、组件封装及跨浏览器的可重用组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天发现 shadow DOM 和 自定义元素,这两个东西和 molecule 简直是同出而异名。

我得好好推敲一下,如果 shadow dom 确实能达到目的且新款浏览器都支持,molecule 就可以停止了。

 


 

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

https://developers.google.com/web/fundamentals/getting-started/primers/customelements

Shadow DOM 修复了 CSS 和 DOM。它在网络平台中引入作用域样式。 无需工具或命名约定,您即可使用原生 JavaScript 捆绑 CSS 和标记、隐藏实现详情以及编写独立的组件

 

自定义元素提供了一种新工具,可让我们在浏览器中定义新 HTML 标记并创建可重用的组件。 将它们与 Shadow DOM 和 <template> 等新平台原语结合使用,我们可开始实现网络组件的宏大图景:

  • 创建和扩展可重复使用组件的跨浏览器(网络标准)。
  • 无需库或框架即可使用。原生 JS/HTML 威武!
  • 提供熟悉的编程模型。仅需使用 DOM/CSS/HTML。
  • 与其他网络平台功能良好匹配(Shadow DOM、<template>、CSS 自定义属性等)
  • 与浏览器的 DevTools 紧密集成。
  • 利用现有的无障碍功能。

转载于:https://www.cnblogs.com/inshua/p/6739653.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值