class NumberDisplay extends HTMLElement { constructor() { super(); } connectedCallback() { this.attachShadow({ mode: 'open' }); this.render(); } render() { const number = this.getAttribute('number') || '1'; const animation = this.getAttribute('animation') || 'zoom'; this.shadowRoot.innerHTML = `
${number}
`; } static get observedAttributes() { return ['number', 'animation']; } attributeChangedCallback(name, oldValue, newValue) { if (oldValue !== newValue) { this.render(); } } } customElements.define('number-display', NumberDisplay);