Web组件可以用于创建自定义输入元素吗? [英] Can Web Components be used to create custom input elements?

问题描述

如何/(或者只是是吗?")创建一个可以放置在表单内并充当任何输入元素(在提交时发送给服务器)的Web组件?换句话说，可以使用Web组件创建自定义输入元素吗?

How is it/(or just "is it?") possible to create a Web Component that can be placed inside a form and act just as any input element, that's sent to the server on submit? In other words, can Web Components be used to create custom input elements?

推荐答案

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

Use the following browser configuration options before testing:

• Chrome浏览器:about:flags => Enabled Experimental WebKit Features/Enable Experimental Web Platform
• Firefox:about:config => dom.registercomponents.enabled

• Chrome: about:flags => Enabled Experimental WebKit Features/Enable Experimental Web Platform
• Firefox: about:config => dom.registercomponents.enabled

启用document.registerElement.

使用document.registerElement的extends参数扩展本机输入元素:

Use the extends parameter of document.registerElement to extend a native input element:

/* 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组件最佳做法
• 组件模型Wiki
• Web组件提案:类型扩展

• Extending Native Elements
• HTML as Custom Elements
• Extending Custom Elements
• Create Custom HTML Elements
• x-tag and the Web Components Family
• Performance and Custom Elements
• Mozilla: Custom Elements
• Detailed Introduction to Custom Elements
• Web Components: The Chromium Projects
• Web Components Best Practices
• Component Model Wiki
• Web Component Proposals: Type Extensions

这篇关于Web组件可以用于创建自定义输入元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！