یک Web Component ساده با نام <user-card> بسازید که یک کارت کاربری شامل عکس آواتار، نام و یک دکمهٔ "نمایش" را با استفاده از template و Shadow DOM نمایش دهد و از attributeها برای مقداردهی اولیه پشتیبانی کند.
2.0 بازدید آخرین ویرایش در 203 روز قبل ساعت 02:37 0.0
یک فایل HTML/JS بسازید که یک شامل ساختار کارت و استایلهای درون-سایه (shadow) داشته باشد؛ سپس در جاوااسکریپت کلاسی از HTMLElement تعریف کنید، در constructor از this.attachShadow({mode: 'open'}) استفاده کنید و محتوای template را کلون و به shadowRoot اضافه کنید. در connectedCallback مقادیر اولیه را از attributeها خوانده و در DOM قرار دهید و برای واکنش به تغییر attributeها از observedAttributes و attributeChangedCallback استفاده کنید؛ برای هندل کردن کلیک دکمه از addEventListener در shadowRoot بهره ببرید و از querySelector روی this.shadowRoot برای بهروزرسانی عناصر استفاده کنید. نکات: استایلها داخل shadow جداسازی میشوند، مقداردهی از attributeها را بهعنوان رشته در نظر بگیرید و برای جلوگیری از نشت استایل/اسکریپت بیرونی از shadow استفاده کنید.
توسط پژوهشگر در 203 روز قبل ساعت 02:37 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
نکته خوب: استفاده از Shadow DOM و template ایمنی نشت استایل/اسکریپت را تضمین میکند و کل محتوای کامپوننت در لایهای جداگانه قرار میگیرد. بهتر است مقادیر اولیهٔ attributes را بهعنوان رشته بگیرید و در صورت نیاز آنها را تبدیل/اعتبارسنجی کنید تا خطاهای نوع داده کاهش یابد. استفاده از disconnectedCallback برای حذف listenerهای اضافه (مثلاً برای دکمهٔ نمایش) از نشتی حافظه جلوگیری میکند. همچنین برای دسترسیپذیری، alt مناسب برای تصویر و role/aria-label مناسب اضافه کنید و امکان سفارشیسازی ظاهر با CSS custom properties را در نظر بگیرید.
گزارش