<my-card></my-card>

<h3>Some Title</h3>
<p>Some content here...</p>

class MyCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h2>Hello World</h2>`;
  }
}
customElements.define('my-card', MyCard);

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style> h2 { color: blue; } </style>
      <h2>Hello World</h2>
    `;
  }
}
customElements.define('my-card', MyCard);

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style> /* CSS ở đây */ </style>
      <slot></slot>
    `;
  }
}
customElements.define('my-card', MyCard);

<a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/headphones.jpg">
  <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/headphones.jpg" alt="Wireless">
</a>
<p>Wireless Headphones</p>
<p class="price">$9.99</p>
<button>Buy Now</button>

.product {
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  max-width: 280px;
  background: #f8f8f8;
}
.price {
  font-size: 1.3em;
  color: #e74c3c;
  font-weight: bold;
}
button {
  background: #27ae60;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
}