ข้ามไปยังเนื้อหา

Glossary

EnglishThai Styleหมายเหตุ
Custom elementcustom elementHTML element ที่ผู้เขียนนิยามเองด้วย tag name ที่มีขีดกลาง (hyphen)
Shadow DOMshadow DOMDOM tree ที่แยกขอบเขตออกจาก document หลัก ทั้งด้าน style และ markup
Templatetemplate<template> element ที่เก็บ markup ไว้ล่วงหน้าโดยไม่ render จนกว่าจะถูก clone
Slotslotจุดที่ light DOM content ของผู้ใช้ถูกแทรกเข้าไปใน shadow tree
Light DOMlight DOMmarkup ปกติที่ผู้ใช้ component เขียนไว้ ณ ตำแหน่งที่เรียกใช้ custom element
EnglishThai Styleหมายเหตุ
Definedefineการลงทะเบียน class กับ tag name ผ่าน customElements.define()
Upgradeupgradeขั้นตอนที่ browser แทนที่ unknown element ด้วย constructor ที่ลงทะเบียนแล้ว
connectedCallbackconnectedCallbacklifecycle callback ที่ทำงานเมื่อ element ถูกแทรกเข้า DOM
disconnectedCallbackdisconnectedCallbacklifecycle callback ที่ทำงานเมื่อ element ถูกถอดออกจาก DOM
observedAttributesobservedAttributesstatic getter ที่ระบุรายชื่อ attribute ที่ต้องการให้ browser เฝ้าดูการเปลี่ยนแปลง
attributeChangedCallbackattributeChangedCallbacklifecycle callback ที่ทำงานเมื่อ attribute ใน observedAttributes เปลี่ยนค่า
EnglishThai Styleหมายเหตุ
:host:hostselector ที่ใช้จัดสไตล์ host element จากภายใน shadow root
::slotted::slottedpseudo-element ที่จัดสไตล์ light DOM content ที่ถูก slot เข้ามา (top-level เท่านั้น)
::part::partpseudo-element ที่ให้ CSS ภายนอกจัดสไตล์ internals ที่ผู้เขียน component เปิดเผยไว้ผ่าน part attribute
Constructable stylesheetconstructable stylesheetCSSStyleSheet ที่สร้างด้วย JS แล้ว share ข้าม shadow root หลายตัวได้โดยไม่ต้อง clone <style>
CSS custom propertyCSS custom propertyตัวแปร CSS (--name) ที่ทะลุผ่าน shadow boundary ได้ ใช้เป็นช่องทาง theming หลัก
EnglishThai Styleหมายเหตุ
Attributeattributeค่าที่ประกาศใน HTML markup เสมอเป็น string
Propertypropertyค่าบน JS object ของ element เก็บ type ใดก็ได้ ไม่จำกัดแค่ string
Reflectionreflectionการ sync ค่าไปมาระหว่าง attribute กับ property
Composed eventcomposed eventevent ที่ตั้ง composed: true จึงข้าม shadow boundary ออกไปได้
Bubblesbubblesคุณสมบัติ event ที่กำหนดว่า event จะลอยขึ้นไปตาม DOM tree หรือไม่
EnglishThai Styleหมายเหตุ
LitLitlibrary ที่ช่วยลด boilerplate ของ native custom element (reactive properties, template diffing)
Form-associatedform-associated custom elementcustom element ที่เข้าร่วมกับ <form> ได้เหมือน native form control ผ่าน static formAssociated = true
ElementInternalsElementInternalsAPI ที่ให้ custom element เข้าถึง form participation และ ARIA semantics แบบเนทีฟ
Declarative shadow DOMdeclarative shadow DOM (DSD)การประกาศ shadow root ด้วย HTML ล้วน (<template shadowrootmode>) โดยไม่ต้องใช้ JavaScript — สำคัญมากสำหรับ SSR
หลีกเลี่ยงใช้แทน
การเข้ารหัสแบบกำหนดเอง (custom element)custom element
เงาโดม (shadow DOM)shadow DOM
แม่แบบ (template)template
ช่องเสียบ (slot)slot
การสะท้อนกลับ (reflection)reflection