如何创建自定义元素扩展类的新实例
How to create new instance of an extended class of custom elements
我正在尝试从谷歌开发人员网站的例子,我得到错误:"TypeError:非法构造函数。出了什么问题?如何解决?
class FancyButton extends HTMLButtonElement {
constructor() {
super(); // always call super() first in the ctor.
this.addEventListener('click', e => this.drawRipple(e.offsetX,e.offsetY));
}
// Material design ripple animation.
drawRipple(x, y) {
let div = document.createElement('div');
div.classList.add('ripple');
this.appendChild(div);
// div.style.top = `${y - div.clientHeight/2}px`;
// div.style.left = `${x - div.clientWidth/2}px`;
div.style.backgroundColor = 'currentColor';
div.classList.add('run');
div.addEventListener('transitionend', e => div.remove());
}
}
customElements.define('fancy-button', FancyButton, {extends: 'button'});
let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;
Blink,目前实现自定义元素v1(例如在Chrome v53+中)的web引擎只支持自治自定义元素:参见open Blink bug。
如果你想定义自定义内置元素(即<button>
扩展),你需要使用像Web Reflection一样的polyfill。
或者,您仍然可以使用自定义元素v0语法(document.registerElement
)。
更新# 3
自2018年10月起,它们可以在Chrome 67+和Firefox 63+上本地工作:-)
class F_BTN extends HTMLButtonElement{
constructor(){
super(); // must call constructor from parent class
this.addEventListener(...);
.... // etc.
}
}
customElements.define("f-btn",F_BTN,{extends:'button'});
使用内联:
<body> .... <f-btn>BTN_NAME</f-btn> ... </body>
或从javascript
创建追加var elm = new F_BTN(...options);
// F_BTN = customElements.get('f-btn') // in case F_BTN is out of scope
问题是elm = document.createElement('f-btn')
不工作。
这就是为什么我创建了自定义create_element函数_E
_E = function (name, html) {
var $;
switch (true) {
case (name === '' || !name): // _E() -- a div
{
$ = document.createElement('div');
}
break;
case (!name.indexOf('<')): // _E('<h1><i>abc</i><b>A</b></h1>') -- sub_dom
{
$ = document.createElement('div');
$.innerHTML = name;
$ = $.firstElementChild;
}
break;
default:
var c = window.customElements.get(name);
if(c){
$ = new c(); // _E('f-btn') -- customElement
} else {
$ = document.createElement(name); // _E('button') -- htmlElement
}
}
if (html) $.innerHTML = html;
return $;
};
var elm1 = _E('f-btn'); parent.appendChild(elm1);
相关文章:
- ES6构造函数返回基类的实例
- 无法在XUL Firefox扩展中获取TinyMCE的实例
- ES6 类扩展本机类型使实例在某些 JavaScript 引擎中出现意外行为
- 使用lodash'扩展JS对象实例;s的extend方法会导致奇怪的结果
- 在Chrome V8中实例化从Object扩展的类时,super()不传递参数
- 扩展直接实例
- 如何定义扩展方法并将其作为实例和静态方法调用
- 在对象实例化期间扩展 JavaScript 对象
- Firefox浏览器扩展实例
- Chrome扩展:如何管理后台页面的单独实例
- 使用网站的Chrome扩展's加载了jQuery实例
- 如何在NodeJS中使用Backbone扩展模块的新实例
- 我如何重新连接到同一个小行星实例上的Chrome扩展
- 如何创建自定义元素扩展类的新实例
- 在Coffee Script中理解类扩展和实例属性
- 扩展一个函数并对其进行实例化-javascript
- 用原型扩展基实例
- 将主干中现有的模型实例扩展/强制转换为派生模型的实例(类似于java中的强制转换)
- 只允许一个Chrome js扩展的活动实例
- 适当地扩展数组,保持子类的实例