O problema é muito simples: não está aplicando o style :)
Veja que no css, usou o seletor "button", mas o elemento é criado/renderizado usando a tag "my-button", por isso o seletor deve ter esse nome de tag.
É um simples problema de seletor, isso não é porque foi criar um "novo" button, pode criar um elemento qualquer e estilizar sem que seja preciso um render, isso porque o HTML
é uma linhagem de marcação, se houver estilo para a marcação, ela será renderizada:
class MyButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", (e) => this.rippe(e.offsetX, e.offsetY));
}
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("transitioned", () => div.remove());
}
}
window.customElements.define("my-button", MyButton, { extends: "button" });
my-button {
width: 150px;
height: 150px;
border-radius: 50%;
color: #fafafa;
background-color: green
}
meu-novo-elemento {
display: block;
border: solid 1px #000;
border-radius: 30px;
background-color: #dcf4ff;
color: #333;
font-family: Arial;
font-size: 1.3em;
padding: 5px;
margin-top: 10px;
text-align: center;
height: 20px;
width: 100px;
}
meu-novo-elemento:hover {
background-color: blue;
color: #fff
}
<my-button>teste button</my-button>
<meu-novo-elemento>Teste</meu-novo-elemento>
Veja que se inspecionar o HTML
, os elementos tem os nomes de tags com os quais foram definidos, por isso o seletor deve acompanhar:

EDIT:
Sobre o código não escrever no console o que está escrito no construtor (obrigado ao @LuizFelipe pelo comentário), fiz vários testes e cheguei à seguinte conclusão:
apenas elementos herdados de HTMLElement
passam "automaticamente"
pelo construtor quando são registrados, sem passar o parâmetro { extends: "tipo" }
.
Isso pode ou não estar certo, mas os testes refletem isso.
Como testei? Criei um código no jsfiddle
(está aqui o original) que copiei no snippet abaixo e pude comprovar isso. Peguei exemplos da internet e criei 3 diferentes WebComponents, herdando de HTMLElement
, HTMLButtonElement
e HTMLParagraphElement
.
Testei nos navegadores Chore, Firefox e Opera e em todos foi o mesmo resultado, no Edge gerou erro ao registrar o component na linha window.customElements.define
. Em todos os casos de teste, todos elementos só passam pelo contrutor quando é feito new
, e o elemento é criado manualmente. Só o elemento herdado de HTMLElement
passa pelo contrutor quando é registrado. Abaixo o código que exemplificia isso:
class MyButton extends HTMLButtonElement {
constructor() {
super();
console.log("construtor MyButton");
this.addEventListener("click", (e) => this.rippe(e.offsetX, e.offsetY));
}
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("transitioned", () => div.remove());
}
}
class WordCount extends HTMLParagraphElement {
constructor() {
super();
console.log("construtor WordCount");
}
}
class PopUpInfo extends HTMLElement {
constructor() {
super();
console.log("construtor PopUpInfo");
}
}
// aqui, só o PopUpInfo (HTMLElement) passa pelo construtor
console.log("Registrar os components:");
window.customElements.define("my-button", MyButton, { extends: "button" });
window.customElements.define('word-count', WordCount, { extends: 'p' });
window.customElements.define('popup-info', PopUpInfo);
// aqui, usando new, todos passam pelo construtor
console.log("---------------------");
console.log("Instanciar os components:");
let popup = new PopUpInfo();
document.body.appendChild(popup);
let paragr = new WordCount();
document.body.appendChild(paragr);
let button = new MyButton();
document.body.appendChild(button);
<word-count>word-count</word-count>
<br />
<my-button>button</my-button>
<br />
<popup-info>popup-info</popup-info>