Komponenty internetowe zyskują obsługę w różnych przeglądarkach, społeczność rośnie w błyskawicznym tempie, a w nowym katalogu komponentów internetowych można znaleźć dokładnie taki komponent, jakiego potrzebujesz.
Czy kiedykolwiek chciałeś tworzyć własny, zamknięty komponent JavaScript, który można łatwo używać w różnych projektach lub udostępniać innym deweloperom niezależnie od tego, jakiego frameworku JavaScript używają? Komponenty sieciowe mogą być dla Ciebie odpowiednie.
Komponenty internetowe to zestaw nowych funkcji platformy internetowej, które umożliwiają 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, mogą wywoływać zdarzenia i na nie odpowiadać, a nawet mieć zakapsułowany styl i drzewa DOM, aby nadać im własny wygląd i działanie.
Dzięki temu, że udostępniają one platformowy model komponentów niskiego poziomu, możesz tworzyć i udostępniać elementy do wielokrotnego użytku, które można stosować w różnych miejscach, od specjalistycznych przycisków po złożone widoki, takie jak pola daty. Komponenty internetowe są tworzone za pomocą interfejsów API platformy, które zawierają potężne prymitywne mechanizmy tworzenia osłon, dzięki czemu możesz używać tych komponentów w ramach innych bibliotek lub frameworków JavaScriptu tak, jakby były standardowymi elementami DOM.
Web Components to technologia, o której pewnie słyszeliście już wcześniej. Wczesna wersja specyfikacji Web Components (wersja 0) została dołączona do Chrome 33.
Obecnie dzięki szerokiej współpracy między dostawcami przeglądarek specyfikacja Web Components w wersji 1 zyskuje szerokie wsparcie. Chrome obsługuje 2 główne specyfikacje, które składają się na komponenty internetowe: ShadowDOM i elementy niestandardowe. Są one dostępne odpowiednio od Chrome 53 i Chrome 54. Safari wprowadziło obsługę Shadow DOM w wersji 1 w Safari 10 i zakończyło implementację niestandardowych elementów w wersji 1 w WebKit. Firefox obecnie rozwija Shadow DOM i Custom Elements w wersji 1. Shadow DOM i Custom Elements są uwzględnione w planie rozwoju przeglądarki Edge.
Aby zdefiniować nowy element niestandardowy za pomocą implementacji w wersji 1, wystarczy utworzyć nową klasę rozszerzającą klasę HTMLElement za pomocą 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ą bardzo zaawansowane. Aby ułatwić Ci rozpoczęcie pracy, przygotowaliśmy samouczki dotyczące korzystania z elementów niestandardowych w wersji 1 i Shadow DOM w wersji 1.
webcomponents.org
Społeczność Web Component również dynamicznie się rozwija. Z dużą radością informujemy o uruchomieniu zaktualizowanej witryny webcomponents.org, która jest centrum społeczności web components, w tym zintegrowanego katalogu, w którym deweloperzy mogą udostępniać swoje elementy.
Witryna webcomponents.org zawiera informacje o specs komponentów internetowych, aktualizacje i treści z społeczności komponentów internetowych. Można na niej też wyświetlić dokumentację dotyczącą elementów open source i zbiorów elementów stworzonych przez innych programistów.
Pierwszy element możesz zacząć tworzyć, korzystając z biblioteki takiej jak Polymer od Google lub bezpośrednio z interfejsu Web Component API. Następnie opublikuj element na stronie webcomponents.org.
Życzymy miłego tworzenia komponentów.