如何创建自定义元素的扩展类的新实例

IT技术 javascript html ecmascript-6 web-component custom-element
2021-03-16 07:22:40

我正在尝试来自google 开发者网站的示例，但出现错误：“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;
2个回答

Blink，当前实现自定义元素 v1（例如在Chrome v53+中）的 Web 引擎仅支持自主自定义元素：请参阅 open Blink bug。

如果你想定义自定义的内置元素（即<button>扩展），你需要使用一个类似于Web Reflection的 polyfill 。

或者，您仍然可以使用自定义元素 v0 语法 ( document.registerElement)。

更新 #3

自 2018 年 10 月以来，它们在本地与 Chrome 67+ 和 Firefox 63+ 一起使用:-)

另外，检查caniuse.com/#feat=custom-elementsv1以获取更新的兼容性表
2021-05-11 07:22:40 
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);
extends在customElements.define方法中添加选项对我有用。谢谢。
2021-04-23 07:22:40
其它你可能感兴趣的问题
上一篇使用 javascript 测试多个屏幕 下一篇Internet Explorer 全屏模式？