یک وبکامپوننت ساده به نام 'user-card' بسازید که نام و ایمیل را از ویژگیها (attributes) دریافت کرده و با Shadow DOM یک کارت کاربری استایل شده نمایش دهد.
3.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:18 0.0
با جاوااسکریپت یک کلاس که از HTMLElement ارثبری میکند تعریف کنید، سپس با this.attachShadow({mode: 'open'}) یک Shadow DOM بسازید و در connectedCallback قالب HTML و CSS کارت را به shadowRoot اضافه کنید. برای دریافت نام و ایمیل از attributes از observedAttributes و متد attributeChangedCallback استفاده کنید تا زمانی که ویژگیها تغییر کردند محتوای کارت بهروزرسانی شود. نکات: از template literal برای ساختن HTML و CSS داخل shadow استفاده کنید تا استایلها ایزوله بمانند، و با customElements.define('user-card', UserCard) المان را ثبت و در صفحه با تست کنید.
توسط پژوهشگر در 221 روز قبل ساعت 01:18 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای کار با وبکامپوننت، در constructor یک Shadow DOM باز ایجاد کنید و HTML/CSS را با template literals در آن بسازید تا استایلها ایزوله بمانند. برای دریافت نام و ایمیل از attributes، باید static get observedAttributes() { return ['name','email']; } و attributeChangedCallback(name, oldVal, newVal) را پیادهسازی کنید تا محتوای کارت هنگام تغییر بهروز شود. در connectedCallback مقداردهی اولیه را با مقادیر موجود در attributes انجام دهید تا با نبود attribute هم مقدار پیشفرض نمایش داده شود. همچنین مطمئن شوید که مقداردهی اولیه و بروزرسانیها را به صورت کارآمد انجام داده و از template literals برای HTML/CSS استفاده میکنید تا کپسولهسازی استایلها کامل باشد.
گزارش