connectedCallback() { // 元素插入页面时绑定事件 this.addEventListener('click', () => { alert('按钮被点击！'); }); } }

customElements.define('my-button', MyButton);

// 构建内部结构
const wrapper = document.createElement('div');
wrapper.innerHTML = `
  <style>
    .card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      background: #f9f9f9;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    h3 { margin-top: 0; color: #333; }
  </style>
  <div class="card">
    <h3>${this.getAttribute('title') || '默认标题'}</h3>
    <slot></slot> <!-- 支持内容分发 -->
  </div>
`;

shadow.appendChild(wrapper);

} }

customElements.define('my-card', MyCard);

<script> class MyAlert extends HTMLElement { constructor() { super(); const template = document.getElementById('my-alert-template'); const content = template.content.cloneNode(true); this.attachShadow({ mode: 'open' }).<a style="color:#f60; text-decoration:underline;" title= "app"href="https://www.php.cn/zt/16186.html" target="_blank">appendChild(content); } } customElements.define('my-alert', MyAlert); </script>

constructor() { super(); this.attachShadow({ mode: 'open' }); this.render(); }

attributeChangedCallback(name, oldValue, newValue) { if (name === 'on') { this.render(); } }

render() { const isOn = this.hasAttribute('on'); this.shadowRoot.innerHTML = <button style=" background: ${isOn ? '#28a745' : '#dc3545'}; color: white; border: none; padding: 8px 16px; border-radius: 4px; "> ${isOn ? '开启' : '关闭'} </button> ; } }

customElements.define('my-toggle', MyToggle);