这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

不可否认，自定义标签是HTML结构的趋势

一、Google的开发文档 中有关创建自定义标签的规则

摘自 Google的开发文档

自定义元素的名称必须包含短横线 (-)。因此，<x-tags>、<my-element> 和 <my-awesome-app> 等均为有效名称，而 <tabs> 和 <foo_bar> 则为无效名称。这一要求使得 HTML 解析器能够区分自定义元素和常规元素。它还可确保向 HTML 添加新标记时的向前兼容性。(难道这就是vue组件名用短横线的原因?)

您不能多次注册同一标记。否则，将产生 DOMException。让浏览器了解新标记后，它就这样定了下来。您不能撤回。

自定义元素不能自我封闭，因为 HTML 仅允许少数元素自我封闭。必须编写封闭标记 (<app-drawer></app-drawer>)。

二、具体用法

其实正八经用起来还是挺费事的，参考文章 很详细

但是你试一下，就算不先注册，也貌似可以用的~？，那么这有什么影响吗，参考文章。这里说的不错，不注册就相当于未定义的变量，如果浏览器支持(好像很多浏览器都支持。。)，会自己去定义它(就是默认值吧，各大文档都有，每个属性都有默认值)。

但是谁知道会出什么问题呢，这么费事，我还是不用啦。

三、接下来测试一下...

不过，你可能在测试自定义标签的时候遇到了一丢丢问题。比如，假设你写了个最简单的：

<my-div style="height: 1300px;background-color: pink;">
哈哈哈
</my-div>

然后去浏览器看效果会发现，哦我的天，为什么高度不生效呢？

然后就开始排查问题，my-div竟然是display:inline 没错，所以这就是我为什么要提：浏览器默认样式表 ↓↓↓

浏览器默认样式表

参考链接： chrome默认样式表 维基百科 Comparison of browser engines 解读浏览器默认样式

• 所以，自定义标签不属于样式表里的任意一个，那么样式就是默认值。默认值怎么看呢😳，比如上边的display？
• so easy