Javascript 如何将默认HTML元素扩展为";定制内置元件“;使用Web组件?
我希望了解如何使用较新的HTML5 Web组件规范扩展默认HTML元素。我尝试了Google在这里列出的示例: 它们是: 匿名函数:Javascript 如何将默认HTML元素扩展为";定制内置元件“;使用Web组件?,javascript,html,web-component,custom-element,google-web-component,Javascript,Html,Web Component,Custom Element,Google Web Component,我希望了解如何使用较新的HTML5 Web组件规范扩展默认HTML元素。我尝试了Google在这里列出的示例: 它们是: 匿名函数: customElements.define('bigger-img', class extends Image { // Give img default size if users don't specify. constructor(width=50, height=50) { super(width * 10, height * 10);
customElements.define('bigger-img', class extends Image {
// Give img default size if users don't specify.
constructor(width=50, height=50) {
super(width * 10, height * 10);
}
}, {extends: 'img'});
// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
// for the list of other DOM interfaces.
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'});
以HTML格式显示为:
<img is="bigger-img" width="15" height="20">
以HTML格式显示为:
<button is="fancy-button" disabled>Fancy button!</button>
别致的按钮!
我无法让这些示例中的任何一个在Chrome55中工作。创建自定义内置元素不起作用的原因是什么?我尝试过将JS和HTML按不同的顺序排列,并在示例中用图像替换掉HTMLImageElement。任何帮助都将不胜感激 这是因为定制的内置元素尚未在Chrome/Opera中实现。检查中铬DEV的状态 只有自主自定义元素已在本机实现 门,而你应该使用一个多边形填充像 自Chrome 67以来的更新
现在它可以与Chrome版本67及以上的版本配合使用。是否有
is=“fancy button”
语法的问题?