ווידג'טים ל-AI ב-2026: מנהלים מצבי UI עם CSS Custom State Pseudo-Classes

לפני חודשיים ישבתי עם מתכנת ראשי בסטארטאפ משדרות רוטשילד. הם בנו צ'אט AI חכם, והקוד שלהם נראה כמו שדה קרב. כל פעם שהמודל החליט לחשוב, להזרים טקסט, או להציע כפתורי המשך, הם הדביקו עוד class ל-div הראשי.

התוצאה? קוד CSS באורך 800 שורות מלא ב-.chat-box.is-thinking.is-streaming:not(.has-error).

זה היה סיוט לתחזוקה.

לפני: ניהול מצבים מורכב וזיהום DOM

במשך שנים, כשבנינו רכיבים מורכבים ברשת, היינו חייבים למצוא מעקפים כדי לסמן מתי רכיב נמצא במצב מסוים.

הדרך הנפוצה הייתה זיהום מחלקות (Class Pollution). הייתם רואים אלמנטים ב-DOM שנראים ככה:

<ai-chat-box class="thinking streaming context-full dark-mode">

כל שינוי קטן ב-JavaScript דרש מאיתנו להוסיף או להסיר מחלקות ידנית. אם שכחת מניפולציה אחת ב-DOM — העיצוב נשבר, הרכיב נתקע במצב "טוען", והמשתמשים פשוט נטשו את העמוד.

אחרי: קפסולציה נקייה עם CSS Custom State

ב-2026, הדפדפנים מציעים לנו דרך הרבה יותר אלגנטית ומהירה. במקום להילחם ב-classes, אנחנו משתמשים ב-Custom State Pseudo-Classes.

הרכיב שומר על הסטייט הפנימי שלו, וה-CSS מבחוץ או מבפנים מגיב לזה בצורה טבעית. שום class מלאכותי לא מופיע ב-HTML.

הגדרה · CSS Custom State Pseudo-Class

טכנולוגיית Web Components שמציגה את המצב הפנימי של Custom Element ל-CSS באמצעות הסלקטור :state(), ללא צורך במחלקות DOM או מאפייני data-*.

הקוד הופך להיות נקי וקריא לחלוטין:

ai-chat-box:state(thinking) {
  opacity: 0.8;
  border-color: var(--purple-pulse);
}

ai-chat-box:state(streaming) {
  box-shadow: 0 0 15px rgba(0, 255, 150, 0.3);
}

אפס מחלקות ב-HTML.

איך זה עובד מתחת למכסה המנוע?

כדי להשתמש בזה, אנחנו פונים למנגנון ה-ElementInternals שקיים בכל Web Component מודרני. קצר ולעניין.

בתוך מחלקת ה-JavaScript של הרכיב, אנחנו מגדירים את ה-states:

class AIChatBox extends HTMLElement {
  constructor() {
    super();
    this._internals = this.attachInternals();
  }

  set status(val) {
    if (val === 'thinking') {
      this._internals.states.add('thinking');
      this._internals.states.delete('streaming');
    } else if (val === 'streaming') {
      this._internals.states.delete('thinking');
      this._internals.states.add('streaming');
    }
  }
}
customElements.define('ai-chat-box', AIChatBox);

מהרגע שהוספנו את המצב ל-this._internals.states, מנוע ה-CSS של הדפדפן מזהה את זה באופן מיידי. משהו כמו :hover או :focus, רק עם שם שאתם המצאתם.

3 מצבי AI שחובה לנהל בווידג'טים מתקדמים

כשעובדים עם מודלים של בינה מלאכותית (כמו ChatGPT, Claude או Gemini), הרכיב עובר דרך שלבים ייחודיים שלא היו קיימים בטפסים קלאסיים.

• מצב הרהור (thinking): המודל מעבד את הפרומפט. כאן נציג אנימציית שלד או עממום קל.
• מצב הזרמה (streaming): התקבל ה-Token הראשון והטקסט מתחיל להיכתב. נפעיל אינדיקטור פעיל בקצה הרכיב.
• מצב זיכרון מלא (context-full): השיחה הגיעה למגבלת ה-Context Window. העיצוב יזהיר את המשתמש מראש.

השוואה: שיטה ישנה מול CSS Custom State

💡

בניית רכיבי UI לממשקי AI לא דורשת עוד ספריות. היא דורשת שימוש נכון ביכולות ה-Native שהדפדפן מציע לנו ב-2026.

שורת הסיכום

ממשקי AI שונים מטפסים רגילים. הקצב שלהם דינמי, חיווי המצב קריטי, והמשתמשים מצפים לתגובה מיידית.

אם אתם עדיין מנהלים עשרות מחלקות CSS בשביל להראות שהרכיב שלכם מקבל מידע מ-LLM, הגיע הזמן להתקדם. :state() נותן לכם רכיבים נקיים, מהירים ומהודקים שכיף לתחזק.