前端开发步伐紧张。无数文章，教程和Twitter线程都在哀叹曾经是一个相当简单的技术堆栈的状态。在本文中，我将讨论为什么Web组件是一个很好的工具，可以提供高质量的用户体验，而无需复杂的框架或构建步骤，并且不会有过时的风险。在这个由五部分组成的系列的后续文章中，我们将深入探讨每个规范。
本系列假定您对HTML，CSS和JavaScript有基本的了解。如果你觉得其中一个领域很弱，不要担心，构建自定义元素实际上简化了前端开发中的许多复杂性。
文章系列：
Web组件简介（本文）制作可重复使用的HTML模板从头开始创建自定义元素使用ShadowDOM封装样式和结构Web组件的高级工具
＃无论如何，Web组件是什么？
Web组件由三个独立的技术组成：
自定义元素。很简单，这些是完全有效的HTML元素，其中one-dialog包含使用一组JavaScriptAPI制作的自定义模板，行为和标记名称（例如）。自定义元素在HTMLLivingStandard规范中定义。ShadowDOM。能够隔离CSS和JavaScript，几乎就像一个iframe。这在LivingStandardDOM规范中定义。HTML模板。HTML中用户定义的模板，在调用之前不会呈现。该template标签在HTML生活水平规范中定义。这些是构成Web组件规范的内容。
HTML模块可能是堆栈中的第四种技术，但它尚未在四大浏览器中实现。Chrome团队已宣布有意在未来版本中实施这些内容。
除MicrosoftEdge和InternetExplorer11外，Web组件通常可在所有主流浏览器中使用，但存在填充这些空白的填充。
参考其中的任何一个，因为WebComponents在技术上是准确的，因为术语本身有点过载。结果，每种技术可以独立使用或与任何其他技术组合使用。换句话说，它们并不是相互排斥的。
让我们快速浏览一下前三个。我们将在本系列的其他文章中深入探讨它们。
＃自定义元素
顾名思义，自定义元素是HTML元素，比如div，section或者article，我们可以通过浏览器API定义自己的名字。自定义元素就像那些标准HTML元素-尖括号中的名称-除了它们总是有一个破折号，如news-slider或bacon-cheeseburger。展望未来，浏览器供应商已承诺不会在名称中创建包含短划线的新内置元素以防止冲突。
自定义元素包含自己的语义，行为，标记，可以跨框架和浏览器共享。
classMyComponentextendsHTMLElement{connectedCallback(){this.innerHTML=`h1Helloworld/h1`;}}customElements.define(my-