相关疑难解决方法(0)
如何创建一个像表单元素一样的Web组件？
我正在尝试创建一个特定于表单元素中可用的Web组件,它具有a name和a value.我承认,我可以创建一个Web组件,它extends的HTMLInputElement:
<input is="very-extended">
但我正在努力创造一个全新的元素.
创建常规Web组件时,可以从regular HTMLElement(HTMLElement.prototype)的原型创建它.这让我想到我可以用HTMLInputElement(HTMLInputElement.prototype)的原型创建一个不同的元素.您实际上extending在输入元素的API 时使用该原型,那么为什么我不能使用该原型来创建一个在表单中工作的全新元素？
如果你看一下常规输入字段的阴影dom:
你可以看到里面有一个div.我知道这HTMLInputElement有方法和属性,getter/setter等等.那么为什么当我尝试创建我的组件时,它不能成为表单中找到的名称,值对的一部分？
以下是我尝试创建此Web组件的示例:
请注意,他应该在支持Web组件的浏览器中进行测试.
(function() {
var iconDoc = (document._currentScript || document.currentScript).ownerDocument;
var objectPrototype = Object.create(HTMLInputElement.prototype);
Object.defineProperty(objectPrototype, 'name', {
writable: true
});
Object.defineProperty(objectPrototype, 'value', {
writable: true
});
objectPrototype.createdCallback = function() {
var shadow = this.createShadowRoot();
var template = iconDoc.querySelector('#test');
shadow.appendChild(template.content.cloneNode(true));
};
document.registerElement('custom-input', {
prototype: objectPrototype
});
})();
console.log(
$('form').serialize()
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template …javascript forms web-component html5-template custom-element
8
推荐指数
推荐指数
1
解决办法
解决办法
2483
查看次数
查看次数