Web组件能用于创建自定义输入元素吗？

Question

如何创建一个 Web Component 并将其放置在表单中，使其像任何输入元素一样能够在提交时发送到服务器？换句话说，是否可以使用 Web Components 来创建自定义输入元素？

- Lars C. Magnusson

---

Google使用Polymer创建的自定义输入元素示例：https://www.polymer-project.org/components/paper-input/demo.html - Ajedi32

Answer 1

在测试之前，请使用以下浏览器配置选项：

• Chrome：about:flags => 启用实验性的 WebKit 功能/启用实验性的 Web 平台
• Firefox：about:config => dom.registercomponents.enabled

以启用document.registerElement。

使用document.registerElement的extends参数来扩展本地输入元素：

/* Cross-browser fallback */
document.registerElement = document.registerElement || document.register;
/* Element registration using x-tag format */
var MegaButton = document.registerElement('x-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
  });

参考资料

• 扩展原生元素
• HTML作为自定义元素
• 扩展自定义元素
• 创建自定义HTML元素
• x-tag和Web组件家族
• 性能和自定义元素
• Mozilla: 自定义元素
• 自定义元素详细介绍
• Web组件：Chromium项目
• Web组件最佳实践
• 组件模型维基
• Web组件提案：类型扩展

- Paul Sweatte

---

@zzzzBov 感谢提醒。我已经更新了 Fiddle（http://jsfiddle.net/sBWr2/46/）以让它在 Firefox 中正常工作，并找到了另一个例子（http://jsfiddle.net/Buttonpresser/9W4pe/），它使用样式表规则来定义自定义标记的显示属性。 - Paul Sweatte

好的，我想我弄清楚了。自定义元素在特定条件下起作用。您需要使用extends属性并执行以下两个操作之一：1.使用构造函数动态创建元素，即new MegaButton() 2.在扩展元素上使用[is]属性，即<button is="mega-button"></button>。在*两种情况下，创建的元素将是扩展类型（在本例中为button），这意味着要为自定义元素设置样式，您需要使用[is="mega-button"]作为选择器，而不是mega-button。但至少这些元素将与阴影DOM和表单一起工作。 - zzzzBov

@zzzzBov，你能更新一下 jsfiddle 上你目前的进展吗？ - Paul Sweatte

这里有一个在Chrome中可用的小工具(http://jsfiddle.net/xZT7L/)，其中设置了一个`<input>元素来使用CodeMirror(http://codemirror.net/)。我本来想使用<textarea>`元素，但似乎它们的影子DOM无法被覆盖。 - zzzzBov

@zzzBov 这是一个很好的例子。我看到了你提到在其中一个参考文献中添加[is]属性的观点，但每次想要创建自定义元素时都需要更新标记似乎有些笨拙。哦，那就是委员会设计。 - Paul Sweatte