Web Komponenty są obsługiwane w różnych przeglądarkach, społeczność stale się powiększa, a dostępny jest zupełnie nowy katalog komponentów sieciowych, w którym znajdziesz dokładnie te komponenty, których potrzebujesz.
Czy chcesz stworzyć własny, samodzielny komponent JavaScript, który możesz łatwo stosować w wielu projektach lub udostępniać go innym programistom niezależnie od używanej przez nich platformy JavaScript? Może Ci się przydać Komponenty internetowe.
Komponenty sieciowe to zestaw nowych funkcji platformy internetowej umożliwiającej tworzenie własnych elementów HTML. Każdy nowy element niestandardowy może mieć tag niestandardowy, np. <my-button>, i wszystkie zalety elementów wbudowanych. Elementy niestandardowe mogą mieć właściwości i metody, uruchamiać zdarzenia i reagować na zdarzenia, a nawet mieć osłonięty styl i drzewa DOM, które zapewniają własny wygląd i styl.
Web Komponenty to oparty na platformie model komponentów, który pozwala tworzyć i udostępniać elementy wielokrotnego użytku do różnych zastosowań – od specjalnych przycisków po złożone widoki, np. selektora dat. Komponenty sieciowe są zbudowane przy użyciu interfejsów API platformy, które zawierają zaawansowane elementy podstawowe hermetyzacji, dzięki czemu można ich nawet używać w innych bibliotekach lub platformach JavaScript tak, jakby były standardowymi elementami DOM.
Być może zdarzyło Ci się już słyszeć o komponentach internetowych – wczesna wersja specyfikacji Web Komponenty w wersji 0 została wprowadzona do Chrome 33.
Obecnie dzięki szeroko zakrojonej współpracy między dostawcami przeglądarek nowa generacja specyfikacji komponentów sieciowych – v1 – uzyskuje szerokie poparcie. Od wersji Chrome 53 i Chrome 54 Chrome obsługuje 2 główne specyfikacje komponentów sieciowych – Shadow DOM i Elementy niestandardowe. Safari dostarczyła obsługę modelu Shadow DOM w wersji 1 w przeglądarce Safari 10 i zakończyła wdrażanie elementów niestandardowych w wersji 1 w WebKit. W przeglądarce Firefox obecnie rozwijamy interfejsy ShadowDOM i Custom Elements w wersji 1. W przypadku Edge planujemy też wdrożenie zarówno ShadowDOM, jak i Custom Elements.
Aby zdefiniować nowy element niestandardowy przy użyciu implementacji w wersji 1, wystarczy utworzyć nową klasę rozszerzającą HTMLElement przy użyciu składni ES6 i zarejestrować ją w przeglądarce:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Nowe specyfikacje w wersji 1 są niezwykle skuteczne. Na początek przygotowaliśmy samouczki na temat elementów niestandardowych w wersji 1 i Shadow DOM v1.
webcomponents.org
Społeczność Web Komponenty działa w szybkim tempie. Z przyjemnością informujemy o wprowadzeniu zaktualizowanej witryny webcomponents.org, która stanowi punkt odniesienia dla społeczności komponentów sieciowych, oraz zintegrowanego katalogu, w którym deweloperzy mogą udostępniać swoje elementy.
Witryna webcomponents.org zawiera informacje o specyfikacjach, aktualizacjach i zawartości komponentów sieciowych oraz o ich aktualizacjach i treści pochodzące ze społeczności komponentów internetowych. Wyświetla też dokumentację elementów typu open source i zbiorów elementów utworzonych przez innych programistów.
Możesz zacząć tworzyć swój pierwszy element, korzystając z biblioteki takiej jak Polymer od Google lub po prostu użyć bezpośrednio niskiego poziomu interfejsu API Web Komponent. Następnie opublikuj element na stronie webcomponents.org.
Powodzenia!