단일 HTML 파일의 웹 구성 요소

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A web component in one HTML file</title>
<style>
  body { margin: 0; padding: 18px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  /* Page CSS: this turns the page's own button orange,
     but it does not reach the buttons inside each counter. */
  button { background: #f97316; color: #fff; border: 0; border-radius: 8px; padding: 9px 14px; font: inherit; cursor: pointer; }
  #list { display: grid; gap: 10px; margin-bottom: 14px; }
</style>
</head>
<body>
<div id="list">
  <click-counter label="Coffees"></click-counter>
  <click-counter label="Glasses of water" start="2"></click-counter>
</div>
<button id="add">Add another counter</button>

<script>
  class ClickCounter extends HTMLElement {
    constructor() {
      super();                              // always first
      this.attachShadow({ mode: 'open' });  // a private DOM tree with its own CSS
    }

    // Runs when the element is put on the page: read attributes here
    connectedCallback() {
      if (this.shadowRoot.childElementCount) return;  // already built
      let count = Number(this.getAttribute('start')) || 0;

      this.shadowRoot.innerHTML = `
        <style>
          :host { display: flex; align-items: center; gap: 12px;
                  background: #fff; padding: 10px 14px; border-radius: 10px;
                  box-shadow: 0 2px 8px rgba(0,0,0,.08); }
          span { flex: 1; }
          button { background: #e8f0fe; color: #1a56db; border: 0; border-radius: 8px;
                   padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
          b { min-width: 2ch; text-align: right; font-size: 1.2em; }
        </style>
        <span></span><button>+1</button><b></b>`;

      const out = this.shadowRoot.querySelector('b');
      this.shadowRoot.querySelector('span').textContent = this.getAttribute('label') || 'Clicks';
      out.textContent = count;
      this.shadowRoot.querySelector('button').addEventListener('click', () => {
        out.textContent = ++count;
      });
    }
  }

  // The name must contain a hyphen
  customElements.define('click-counter', ClickCounter);

  // Elements added later work too
  let n = 0;
  document.getElementById('add').addEventListener('click', () => {
    const c = document.createElement('click-counter');
    c.setAttribute('label', 'New counter ' + (++n));
    document.getElementById('list').append(c);
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The same counter with Lit from a CDN</title>
<style>
  body { margin: 0; padding: 18px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  #list { display: grid; gap: 10px; }
  /* Until the script has loaded and defined the tag, show it faded */
  lit-counter:not(:defined) { display: block; height: 46px; border-radius: 10px; background: #e5e7eb; }
  p { font-size: 14px; color: #4b5563; }
</style>
</head>
<body>
<div id="list">
  <lit-counter label="Coffees"></lit-counter>
  <lit-counter label="Glasses of water" start="2"></lit-counter>
</div>
<p id="status">Loading Lit 3.3.3 from cdn.jsdelivr.net...</p>

<!-- type="module" is required: the file uses import -->
<script type="module">
  import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3.3.3/core/lit-core.min.js';

  class LitCounter extends LitElement {
    // Reactive properties: changing one re-renders the element
    static properties = {
      label: {},
      count: { type: Number, attribute: 'start' },
    };

    // Lit puts these styles in the shadow root for you
    static styles = css`
      :host { display: flex; align-items: center; gap: 12px;
              background: #fff; padding: 10px 14px; border-radius: 10px;
              box-shadow: 0 2px 8px rgba(0,0,0,.08); }
      span { flex: 1; }
      button { background: #e8f0fe; color: #1a56db; border: 0; border-radius: 8px;
               padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
      b { min-width: 2ch; text-align: right; font-size: 1.2em; }
    `;

    constructor() {
      super();
      this.label = 'Clicks';
      this.count = 0;
    }

    render() {
      return html`
        <span>${this.label}</span>
        <button @click=${() => this.count++}>+1</button>
        <b>${this.count}</b>`;
    }
  }

  customElements.define('lit-counter', LitCounter);
  document.getElementById('status').textContent = 'Lit 3.3.3 loaded. Same counter, no innerHTML or listeners to wire by hand.';
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A star-rating web component</title>
<style>
  body { margin: 0; padding: 18px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
         background: #fff; padding: 8px 14px; border-radius: 10px; margin-bottom: 8px; }
  /* CSS variables pass into the shadow root, so the page can theme the stars */
  .row:nth-child(2) star-rating { --star-color: #16a34a; }
  #summary { margin: 12px 0 8px; font-weight: 600; }
  #reset { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 14px; font: inherit; cursor: pointer; }
</style>
</head>
<body>
<div class="row">Food <star-rating name="food" value="4"></star-rating></div>
<div class="row">Service <star-rating name="service" value="3"></star-rating></div>
<div class="row">Price <star-rating name="price"></star-rating></div>
<p id="summary" aria-live="polite">Click a star.</p>
<button id="reset">Reset all</button>

<script>
  class StarRating extends HTMLElement {
    // Only attributes listed here trigger attributeChangedCallback
    static observedAttributes = ['value'];

    constructor() {
      super();
      this.attachShadow({ mode: 'open' }).innerHTML = `
        <style>
          :host { display: inline-flex; gap: 2px; }
          button { background: none; border: 0; padding: 2px; font-size: 26px; line-height: 1;
                   cursor: pointer; color: #d1d5db; }
          button.on { color: var(--star-color, #f59e0b); }
        </style>`;
    }

    connectedCallback() {
      if (this.shadowRoot.querySelector('button')) return;  // already built
      for (let i = 1; i <= 5; i++) {
        const b = document.createElement('button');
        b.textContent = '★';
        b.setAttribute('aria-label', i + ' of 5');
        b.addEventListener('click', () => {
          this.setAttribute('value', i);  // goes through attributeChangedCallback
          // bubbles + composed: the event leaves the shadow root and reaches the page
          this.dispatchEvent(new CustomEvent('rating-change', {
            detail: { name: this.getAttribute('name'), value: i },
            bubbles: true, composed: true,
          }));
        });
        this.shadowRoot.append(b);
      }
      this.paint();
    }

    attributeChangedCallback() { this.paint(); }

    paint() {
      const value = Number(this.getAttribute('value')) || 0;
      this.shadowRoot.querySelectorAll('button').forEach((b, i) => {
        b.classList.toggle('on', i < value);
        b.setAttribute('aria-pressed', i < value);
      });
    }
  }
  customElements.define('star-rating', StarRating);

  // The page listens like it would for any other event
  const summary = document.getElementById('summary');
  document.addEventListener('rating-change', (e) => {
    summary.textContent = 'You gave ' + e.detail.name + ' ' + e.detail.value + ' of 5.';
  });

  document.getElementById('reset').addEventListener('click', () => {
    document.querySelectorAll('star-rating').forEach((r) => r.setAttribute('value', 0));
    summary.textContent = 'All ratings reset.';
  });
</script>
</body>
</html>