คอมโพเนนต์เว็บได้รับการรองรับในหลายเบราว์เซอร์ ชุมชนก็เติบโตขึ้นอย่างรวดเร็ว และยังมีแคตตาล็อกคอมโพเนนต์เว็บใหม่ล่าสุดที่จะช่วยให้คุณค้นหาคอมโพเนนต์ที่ต้องการได้
เคยอยากสร้างคอมโพเนนต์ JavaScript แบบสแตนด์อโลนของคุณเองไหม ซึ่งคุณสามารถนำไปใช้ในหลายโปรเจ็กต์หรือแชร์กับนักพัฒนาซอฟต์แวร์คนอื่นๆ ได้อย่างง่ายดาย ไม่ว่าจะใช้เฟรมเวิร์ก JavaScript ใดก็ตาม คอมโพเนนต์ของเว็บอาจเหมาะกับคุณ
คอมโพเนนต์เว็บคือชุดฟีเจอร์ใหม่ของแพลตฟอร์มเว็บที่ช่วยให้คุณสร้างองค์ประกอบ HTML ของคุณเองได้ องค์ประกอบที่กําหนดเองใหม่แต่ละรายการจะมีแท็กที่กําหนดเองได้ เช่น <my-button> และมีคุณสมบัติทั้งหมดขององค์ประกอบในตัว องค์ประกอบที่กําหนดเองอาจมีพร็อพเพอร์ตี้และเมธอด เรียกใช้และตอบสนองต่อเหตุการณ์ และยังมีสไตล์และต้นไม้ DOM ที่แฝงอยู่เพื่อแสดงรูปลักษณ์ของตนเอง
เว็บคอมโพเนนต์ช่วยให้คุณสร้างและแชร์องค์ประกอบที่นํากลับมาใช้ซ้ำได้สําหรับทุกสิ่ง ตั้งแต่ปุ่มเฉพาะไปจนถึงมุมมองที่ซับซ้อน เช่น เครื่องมือเลือกวันที่ โดยใช้รูปแบบคอมโพเนนต์ระดับล่างที่อิงตามแพลตฟอร์ม เนื่องจากคอมโพเนนต์เว็บสร้างขึ้นด้วยแพลตฟอร์ม API ซึ่งมีองค์ประกอบพื้นฐานในการรวมข้อมูลที่มีประสิทธิภาพ คุณจึงใช้คอมโพเนนต์เหล่านี้ภายในไลบรารีหรือเฟรมเวิร์ก JavaScript อื่นๆ ได้ ราวกับว่าองค์ประกอบเหล่านั้นเป็นองค์ประกอบ DOM มาตรฐาน
คุณอาจเคยได้ยินเกี่ยวกับ Web Components มาก่อน เราได้เปิดตัวข้อกำหนด Web Components เวอร์ชันแรก (v0) ใน Chrome 33
ปัจจุบัน ความร่วมมือที่กว้างขวางระหว่างผู้ให้บริการเบราว์เซอร์ทำให้ข้อกำหนด Web Components รุ่นถัดไปอย่าง v1 ได้รับการรองรับอย่างกว้างขวาง Chrome รองรับข้อกำหนดหลัก 2 ข้อที่ประกอบกันเป็น Web Components ได้แก่ Shadow DOM และองค์ประกอบที่กําหนดเอง Chrome 53 และChrome 54 ตามลำดับ Safari รองรับ Shadow DOM v1 ใน Safari 10 และติดตั้งใช้งาน Custom Elements v1 ใน WebKit เรียบร้อยแล้ว ปัจจุบัน Firefox กำลังพัฒนา Shadow DOM และ องค์ประกอบที่กําหนดเอง v1 และทั้ง Shadow DOM และองค์ประกอบที่กําหนดเองอยู่ในแผนพัฒนาของ Edge
หากต้องการกำหนดองค์ประกอบที่กำหนดเองใหม่โดยใช้การใช้งาน v1 คุณก็เพียงสร้างคลาสใหม่ที่ขยาย HTMLElement โดยใช้ไวยากรณ์ ES6 และลงทะเบียนกับเบราว์เซอร์
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
ข้อกำหนดใหม่ของ v1 มีประสิทธิภาพมาก เราจึงได้รวบรวมบทแนะนำเกี่ยวกับการใช้ Custom Elements v1 และ Shadow DOM v1 เพื่อช่วยคุณเริ่มต้นใช้งาน
webcomponents.org
ชุมชน Web Component ก็เติบโตขึ้นอย่างรวดเร็วเช่นกัน เรายินดีที่ได้เห็นว่าเว็บไซต์ webcomponents.org เวอร์ชันอัปเดตได้เปิดตัวแล้ว ซึ่งเป็นจุดศูนย์กลางของชุมชนเว็บคอมโพเนนต์ รวมถึงแคตตาล็อกแบบรวมที่นักพัฒนาแอปใช้แชร์องค์ประกอบได้
เว็บไซต์ webcomponents.org มีข้อมูลเกี่ยวกับspecs อัปเดต และเนื้อหาของ Web Components จากชุมชน Web Components รวมถึงแสดงเอกสารประกอบสำหรับองค์ประกอบแบบโอเพนซอร์ส และคอลเล็กชันองค์ประกอบที่นักพัฒนาซอฟต์แวร์รายอื่นสร้างขึ้น
คุณเริ่มต้นสร้างองค์ประกอบแรกได้โดยใช้ไลบรารีอย่าง Polymer ของ Google หรือจะใช้ Web Component API ระดับล่างโดยตรงก็ได้ จากนั้นเผยแพร่องค์ประกอบของคุณใน webcomponents.org
ขอให้สนุกกับการสร้างคอมโพเนนต์