开发者社区汪子熙文章正文

shadow dom一个最简单的例子

2021-12-08 80

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： shadow dom一个最简单的例子

看个具体的例子：

<html>
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
</html>

通过document.getElementById返回的元素的innerHTML仍然是原始dom的hello world：

文章标签：

JavaScript

关键词：

dom shadow

技术工程师

技术小达人

7月前

JavaScript 前端开发 API

带你读《现代Javascript高级教程》二十二、JS Shadow DOM：创建封装的组件和样式隔离（1）

技术小达人

61 0 0

技术小达人

7月前

JavaScript 前端开发 API

带你读《现代Javascript高级教程》二十二、JS Shadow DOM：创建封装的组件和样式隔离（2）

技术小达人

67 0 0

尘缘..

9月前

JavaScript 前端开发安全

从自定义元素到 Shadow DOM

该文介绍了自定义元素和 Shadow DOM 的概念和用法。自定义元素是一种允许开发者创建自己的 HTML 标签的技术，它使得代码更加语义化和结构化。博文详细解释了如何定义自定义元素，并且展示了如何添加自定义属性和方法。此外，博文还介绍了 Shadow DOM 的概念和作用。Shadow DOM 用于封装和隔离组件的样式和 DOM 结构，以避免样式冲突和污染。博文通过示例代码演示了如何创建和使用 Shadow DOM，并且强调了它在构建独立组件和模块化代码方面的重要性。这篇博文将帮助读者了解和掌握自定义元素和 Shadow DOM 的技术，提升他们在 Web 开发中的能力和效率。

尘缘..

134 1 1

趁你还年轻233

JavaScript 算法

简单理解slot算法和shadow DOM

趁你还年轻233

270 0 0