<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Components Demo</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Web Components Demo</h1>
    <!-- Using the custom element -->
    <app-cart></app-cart>
</body>
</html>

h1 {
  color: blue;
}
// Define the web component
class AppCart extends HTMLElement {
  constructor() {
    super();

    // Attach a shadow DOM to the custom element
    const shadow = this.attachShadow({ mode: 'open' });

    const section = document.createElement('section');
    section.innerHTML = `
       <style> h1 { color: red} </style>
       <h1>Cart component</h1>
       <p>This is a demo text inside the component.</p>
    `;
    shadow.appendChild(section);
  }
}

// Register the custom element
customElements.define('app-cart', AppCart);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.