创建自定义HTML标签是否安全？

Question

我正在阅读一种技术，可以创建自定义的HTML标签，例如：

<!-- REGISTER CUSTOM ELEMENTS -->
<script type="text/javascript">
    var ApplicationContainer = document.registerElement('application-container');
    document.body.appendChild(new ApplicationContainer());
</script>

鉴于现在有许多不同的浏览器和版本，我想知道：

• 现在创建自定义标签是否安全？
• 如果不安全，应该采用什么适当的解决方案？

...其实我只是好奇。

- Prisoner ZERO

---

也许你正在尝试解决一个XY问题？ - Uwe Keim

我熟悉的自定义HTML标签唯一应用是通过像Angular这样的框架，它允许您“注册”自定义指令来封装DOM操作，因此实际上，您正在“创建”新元素，但它们只是基于核心HTML元素的扩展功能，而不是“全新”的元素。 - Code Apprentice

我并不是在尝试解决任何问题。我只是读了这篇文章，然后想到..."那肯定不安全"。我甚至在问题的第一行就这么说了...最后以“只是好奇”结束。 - Prisoner ZERO

“safe”是什么意思？ - guest271314

可能是Can I use custom tag names, without using web components, just for styling?的重复问题。 - Daniel Beck

简而言之，这是完全安全和合法的，但大多数人仍然会告诉你不要这样做。他们可能是正确的。 - Daniel Beck

Answer 1

不推荐这样做，除非你有某种polyfill。在大多数浏览器中不支持，详见caniuse。

已知有一些polyfills，但它们也有缺点。请参阅WebComponents Repository。

- Ian

Answer 2

我不建议你这样做。你应该能够使用现有的HTML标签来实现你需要的任何功能。你需要重新考虑你的要求。你是否需要一个新的HTML标签来使它与现有的标签有所区别？如果是，你可以始终使用数据属性来区分它与其他标签。但是，如果你确实需要创建一个自定义标签，Google开发者提供了非常有趣的指南。希望我的回答对你有所帮助。

- Ramin Ahmadi

Answer 3

根据 snuggsi 的说法：

Web Components 已经准备好投入生产使用

& Custom Elements v1 在包括 Internet Explorer 11+ / Edge 在内的所有现代浏览器中都有完整的支持

“安全”这个词比较广泛和不确定，因此不太清楚您的意思。

- guest271314

---

“安全”是指旧版浏览器。 - Prisoner ZERO

实际上，@PrisonerZERO，恰恰相反。这在2017年及以后是100%不安全的。即使微软也已经公开表示，如果您仍然支持任何<11的内容，您已经扣动了脚枪的扳机。我已经在README的浏览器支持部分中对此进行了彻底的记录。https://github.com/devpunks/snuggsi#browser-support - Snuggs

Answer 4

@PrisonerZER0 我不觉得“古老的浏览器”一词是“安全”的。这有点自相矛盾。甚至微软也已经将IE放入棺材里了. https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support

支持它们只会带来麻烦。感谢你的喊话。

我创建了snuggsi ツ (https://github.com/devpunks/snuggsi)库，作为Web组件/自定义元素本地浏览器规范的一个约定套件。我的哲学是，你不需要知道node、webpack、babel等等。只需要掌握基本的HTML、CSS、JS就可以在2017年高效工作。以下片段是一个完美的例子。

随时在Github上联系我，因为你似乎已经掌握了现代平台开发的要领。我们不需要这些复杂的前端工具，因为我们正在前往的地方。欢迎在Github上联系我，以便我可以帮助你入门！

<hello-world>
 Hello {planet}
</hello-world>

<!-- more info @ https://github.com/devpunks/snuggsi -->
<script src=//unpkg.com/snuggsi></script>
<script>

// Element Definition -----------------------------

Element `hello-world`

// Class Description ------------------------------

(class extends HTMLElement {

  get planet ()
    // "automagic" token binding
    { return 'world ' }

  onclick ()
    // "automagic" event registration
    { alert (this) }
})

</script>

- Snuggs

---

好的...我一定会去看看它。 - Prisoner ZERO

你如何在不同的页面中重复使用这些组件？ - Moss