הרבה זמן שמרתי מרחק מ Web Components כי היה ריאקט ו vue ולא בטוח כמה תמיכה טובה היתה להם והיו ריבים וכל מיני שטויות. אם גם אתם איכשהו פספסתם את מה שקרה ברשת בשנים האחרונות תשמחו לשמוע שבתחום של Web Components כל הסיפור נפתר והיום הם עובדים די טוב.

נכון הם לא נותנים את כל מה שריאקט נותנת והם דורשים הרבה עבודה ידנית בעיקר בחיבור קוד לטיפול באירועים, אבל אין לי ספק שאם הם היו קיימים ב 2015 לא היו לנו את כל ה JavaScript Frameworks שאנחנו רואים היום (או מצד שני, אולי רק בזכות ריאקט וחבריו כותבי התקנים הצליחו להגיע להסכמה על Web Components).

בכל מקרה כתבתי דוגמה קטנה של מונה לחיצות ב Web Component בשביל לשחק עם ה API. ה HTML הוא:

<my-counter></my-counter>
<my-counter></my-counter>
<my-counter></my-counter>

<template id="counter">
  <p>I'm a counter. value = <span class="value">0</span>
    <button class="inc">+1</button>
    <button class="dec">-1</button>
  </p>
</template>

והוא כולל את הטמפלייט ויצירה של הקומפוננטה 3 פעמים, וה JavaScript שגורם לכל העסק לעבוד הוא:

customElements.define(
  "my-counter",
  class extends HTMLElement {
    connectedCallback() {
      let template = document.getElementById("counter");
      let templateContent = template.content;
      const shadowRoot = this.attachShadow({ mode: "open" });

      shadowRoot.appendChild(templateContent.cloneNode(true));

      let value = 0;
      const valueSpan = shadowRoot.querySelector('.value')
      shadowRoot.querySelector('.inc').addEventListener('click', () => {
        value += 1;
        valueSpan.textContent = value;
      })

      shadowRoot.querySelector('.dec').addEventListener('click', () => {
        value -= 1;
        valueSpan.textContent = value;
      })
    }
  }
);

וכן צריך ידנית לקחת את הטמפלייט, לשכפל אותו ולהוסיף אותו ל DOM ואז להגדיר את קוד הטיפול לכפתורים. אין מנגנון מובנה של State ו Props וכל ה Virtual DOM שאנשים רגילים לראות, אבל כן יש מידול והפרדה בין קוד הקומפוננטה לקוד של קומפוננטות אחרות ואפשר גם להפריד את העיצוב מהעיצוב הכללי של העמוד ולהדביק קובץ CSS ספציפי לקומפוננטה.

גירסה 19 של ריאקט שתבוא עלינו לטובה באזור יוני או יולי כוללת לפי הסיפורים תמיכה מלאה ב Web Components כך שנוכל לשלב אותם ביישום ריאקט בלי בעיה. יהיה מעניין.

נ.ב. זה הלינק לקודפן עם הקומפוננטת ווב, תרגישו חופשי לשחק ולשבור: https://codepen.io/ynonp/pen/qBGWQEw