前言刚接触前端的时候，一直很好奇一个问题，为什么是这样的：……等等，这些标签看似很简单，但为什么能表现出如此丰富复杂的布局呢？我当时给自己的解释是：这些标签是系统控件渲染的。现在想来，这个解释似乎有道理，但毕竟不涉及本质原因。专家级的解释应该是：以上元素以组件的形式存在，显示的布局都是在组件内部定义的，如果页面引用了这些元素标签，它的内部布局将呈现在页面上。在介绍WebComponents的时候提到它的第二个技术规范是ShadowDOM。通过了解ShadowDOM的相关知识，上述疑惑或许可以迎刃而解。查看默认组件的ShadowDOM，可能有人会疑惑，既然文章开头列出的元素都是组件，为什么我在开发者工具中看到的结构是这样的：有没有办法看到DOM结构每个组件内部？？答案是肯定的，步骤如下：第一步：打开开发者工具，点击右上角的设置图标：第二步：找到首选项-元素，选择“显示用户代理ShadowDOM”：此时，我们再看看那些默认组件的内部结构，如下图：可以看到，这些默认的标签都包含了一个“shadowroot”，具体的布局都包含在shadowroot中：一个看似简单的audio元素，里面的布局相当复杂。这不禁让我想起一句话：功夫全在台外。在上面的截图中，我们看到了“shadowroot”，它实际上是ShadowDOM的一部分。ShadowDOM的概念在介绍概念之前，我们先来看看“影”字的中文解释：ShadowDOM，译为“影子DOM”。当然，人影都是隐藏在暗处，不容易被人发现。就像文章开头提到的默认元素一样，如果我们不通过设置，表面上看到的只是一个简单的标签。专业的解释是：ShadowDOM是HTML的一种规范，允许浏览器开发者封装自己的HTML标签、CSS样式和特定的Javascrip代码，也允许开发者创建自定义标签，如
