ส่วนประกอบเว็บ

Web Componentsคือชุดคุณสมบัติที่ให้โมเดลส่วนประกอบมาตรฐานสำหรับเว็บ^{[ 1 ]}ซึ่งช่วยให้สามารถห่อหุ้มและทำงานร่วมกันได้ขององค์ประกอบ HTML แต่ละรายการ Web Components เป็นแนวทางที่นิยมใช้ในการสร้างไมโครฟรอนต์เอนด์

เทคโนโลยีหลักที่ใช้ในการสร้าง Web Components ได้แก่: ^{[ 2 ]}

องค์ประกอบที่กำหนดเอง

API สำหรับกำหนดองค์ประกอบ HTML ใหม่

เงา DOM

DOM และการจัดสไตล์แบบห่อหุ้ม พร้อมด้วยองค์ประกอบ

เทมเพลต HTML

ส่วนของ HTML ที่ไม่ได้แสดงผล แต่ถูกจัดเก็บไว้จนกว่าจะถูกสร้างอินสแตนซ์ผ่าน JavaScript ^{[ 3 ]}

องค์ประกอบแบบกำหนดเองมีสองส่วน ได้แก่ องค์ประกอบแบบกำหนดเองอิสระและองค์ประกอบในตัวที่ปรับแต่งแล้ว องค์ประกอบแบบกำหนดเองอิสระคือ องค์ประกอบ HTMLที่แยกออกจาก องค์ประกอบ HTML ดั้งเดิม โดยสิ้นเชิง โดยพื้นฐานแล้วจะถูกสร้างขึ้นจากล่างขึ้นบนโดยใช้API ขององค์ประกอบแบบกำหนดเอง องค์ประกอบในตัวที่ปรับแต่งแล้วคือองค์ประกอบที่สร้างขึ้นบนองค์ประกอบ HTML ดั้งเดิมเพื่อนำฟังก์ชันการทำงานมาใช้ซ้ำ^{[ 4 ]}

Shadow DOM เป็นฟังก์ชันที่ช่วยให้เว็บเบราว์เซอร์แสดงผล องค์ประกอบ DOMโดยไม่ต้องใส่ลงในโครงสร้าง DOM หลักของเอกสาร ซึ่งจะสร้างกำแพงกั้นระหว่างสิ่งที่นักพัฒนาและเบราว์เซอร์สามารถเข้าถึงได้ นักพัฒนาไม่สามารถเข้าถึง Shadow DOM ได้ในลักษณะเดียวกับที่เข้าถึงองค์ประกอบที่ซ้อนกัน ในขณะที่เบราว์เซอร์สามารถแสดงผลและแก้ไขโค้ดนั้นได้ในลักษณะเดียวกับที่เข้าถึงองค์ประกอบที่ซ้อนกัน ผลกระทบของ CSS ที่อยู่ในขอบเขต Shadow DOM ขององค์ประกอบเฉพาะคือ องค์ประกอบ HTMLสามารถถูกห่อหุ้มได้โดยไม่มีความเสี่ยงที่ สไตล์ CSSจะรั่วไหลและส่งผลกระทบต่อองค์ประกอบที่ไม่ควรได้รับผลกระทบ แม้ว่าองค์ประกอบเหล่านี้จะถูกห่อหุ้มในส่วนของ HTML และ CSS แต่ก็ยังสามารถเรียกใช้งานเหตุการณ์ที่องค์ประกอบอื่นในเอกสารสามารถรับได้^{[ 5 ] [ 6 ]}

ซับทรีที่มีขอบเขตในองค์ประกอบเรียกว่า ชาโดว์ทรี องค์ประกอบที่ชาโดว์ทรีแนบอยู่เรียกว่า ชาโดว์โฮสต์^{[ 6 ]}

Shadow DOM จะต้องเชื่อมต่อกับองค์ประกอบที่มีอยู่เสมอ ไม่ว่าจะโดยการแนบเป็นองค์ประกอบจริงหรือโดยการเขียนสคริปต์ในJavaScript Shadow DOM จะเชื่อมต่อกับองค์ประกอบโดยElement.attachShadow()ใช้^{[ 7 ]}

เทมเพลต HTML กำหนดบล็อกของเนื้อหา HTML ที่จะไม่แสดงผลเมื่อโหลดหน้าเว็บ แต่สามารถเรียกใช้ได้ในระหว่างการทำงาน โครงสร้างขององค์ประกอบเทมเพลตมีดังนี้:

<template> <h1>ชื่อเรื่อง</h1> <p>คำอธิบาย</p> </template>​​​​​​​​​​

สคริปต์ภายในเทมเพลตจะไม่ทำงาน และทรัพยากรจะไม่ถูกดึงมา จนกว่าเนื้อหาจะถูกโคลนหรือเพิ่มลงใน DOM ^{[ 8 ]}

Web Components ได้รับการสนับสนุนโดยเบราว์เซอร์หลักทุกเวอร์ชันในปัจจุบัน^{[ 9 ]}

การรองรับการใช้งานร่วมกับเบรา ว์ เซอร์รุ่นเก่าทำได้โดยใช้polyfillที่ใช้JavaScript

มีไลบรารีมากมายที่สร้างขึ้นบนพื้นฐานของ Web Components โดยมีเป้าหมายเพื่อเพิ่มระดับของนามธรรมในการสร้างองค์ประกอบแบบกำหนดเอง ไลบรารีเหล่านี้บางส่วนได้แก่X-Tag , Slim.js , Polymer , Bosonic , Riot.js , Salesforce Lightning Web Components , DataFormsJS , TelepathyและWompo

มีความพยายามร่วมกันมากมายในชุมชนสำหรับระบบนิเวศของ Web Components WebComponents.org ^{[ 10 ]}มีอินเทอร์เฟซสำหรับค้นหา Web Components ที่มีอยู่ Custom Elements Everywhere ^{[ 11 ]}ตรวจสอบว่าเฟรมเวิร์ก front-end ยอดนิยมเข้ากันได้และพร้อมใช้งานตามมาตรฐาน Web Components หรือไม่ โดยมีชุดข้อบกพร่องที่รอการแก้ไขและวิธีแก้ปัญหาที่มีอยู่ นอกจากนี้ Vaadin Tutorials ^{[ 12 ]}ยังมีส่วนเฉพาะที่แสดงวิธีการใช้วิธีแก้ปัญหาเหล่านั้นอย่างมีประสิทธิภาพด้วยแอปสาธิตตัวอย่างและหัวข้อที่เกี่ยวข้องอื่นๆ

ในปี 2011 Alex Russell ได้นำเสนอ Web Components เป็นครั้งแรกในงาน Fronteers Conference ^{[ 13 ]}

ในปี 2556 Google ได้เปิดตัวPolymer ซึ่งเป็นไลบรารีที่ใช้ Web Components ^{[ 14 ]} Polymer เป็นการนำMaterial Designมา ใช้ในรูปแบบมาตรฐาน สำหรับส่วนติดต่อผู้ใช้ของเว็บแอปพลิเคชัน

ในปี 2559 RequireJS ได้รับการแนะนำให้เป็นไลบรารี JavaScript และ ปลั๊กอินโหลด AMDสำหรับองค์ประกอบแบบกำหนดเอง^{[ 15 ]}

ในปี 2017 ทีมIonic (เฟรมเวิร์กแอปมือถือ) ได้สร้าง StencilJSซึ่งเป็นคอมไพเลอร์ JavaScript ที่สร้าง Web Components ^{[ 16 ]}

ในปี 2018 Angular 6 ได้เปิดตัว Angular Elements ซึ่งช่วยให้คุณสามารถบรรจุส่วนประกอบ Angular ของคุณเป็นองค์ประกอบเว็บแบบกำหนดเอง ซึ่งเป็นส่วนหนึ่งของชุด API แพลตฟอร์มเว็บของส่วนประกอบเว็บ^{[ 17 ]}

ในปี 2018 Firefox 63 ได้เปิดใช้งานการสนับสนุน Web Components เป็นค่าเริ่มต้น และอัปเดตเครื่องมือสำหรับนักพัฒนาเพื่อรองรับ Web Components ^{[ 18 ]}

ในปี 2018 ทีม Google Chrome ได้พัฒนาLitElement ขึ้นมาโดยเป็นส่วนหนึ่งของโครงการ Polymer ที่ใหญ่กว่า LitElement ถูกออกแบบมาให้เป็นเฟรมเวิร์กที่มีน้ำหนักเบาและใช้งานง่ายสำหรับการสร้างเว็บคอมโพเนนต์

• ส่วนประกอบ HTML
• เฟรมเวิร์กเว็บ
• แหล่งข้อมูลบนเว็บ

• เว็บไซต์อย่างเป็นทางการ