Web Bileşenleri tarayıcılar arası destek alıyor, topluluk hızla büyüyor ve tam olarak ihtiyacınız olan bileşeni bulmak için yepyeni bir Web Bileşeni kataloğu var.
Hiç birden fazla projede kolayca kullanabileceğiniz veya hangi JavaScript çerçevesi kullandıklarından bağımsız olarak diğer geliştiricilerle paylaşabileceğiniz kendi bağımsız JavaScript bileşeninizi oluşturmak istediğiniz oldu mu? Web Bileşenleri size uygun olabilir.
Web Bileşenleri, kendi HTML öğelerinizi oluşturabilmenizi sağlayan yeni web platformu özellikleri grubudur. Her yeni özel öğe, <my-button> gibi bir özel etikete sahip olabilir ve yerleşik öğelerin tüm güzelliğine sahip olabilir. Özel öğelerin özellikleri ve yöntemleri olabilir, etkinlikleri tetikleyebilir ve yanıt verebilir, hatta kendi görünüm ve tarzlarını getirmek için kapsüllenmiş bir stile ve DOM ağaçlarına sahip olabilirler.
Web Bileşenleri, platform tabanlı, alt düzey bir bileşen modeli sunarak özel düğmelerden tarih seçici gibi karmaşık görünümlere kadar her şey için yeniden kullanılabilir öğeler oluşturmanıza ve paylaşmanıza olanak tanır. Web Bileşenleri, güçlü kapsülleme temel öğeleri içeren platform API'leriyle derlendiğinden, bu bileşenleri diğer JavaScript kitaplıklarında veya çerçevelerinde standart DOM öğeleriymiş gibi kullanabilirsiniz.
Web Bileşenleri'ni (v0), Web Bileşenleri spesifikasyonunun eski bir sürümünün Chrome 33'te kullanıma sunulduğunu daha önce duymuş olabilirsiniz.
Günümüzde tarayıcı tedarikçileri arasındaki geniş çaplı işbirliği sayesinde, Web Bileşenleri spesifikasyonunun yeni nesil sürümü olan v1, geniş çapta destek kazanıyor. Chrome 53 ve Chrome 54'ten itibaren Chrome, Web Bileşenlerini oluşturan iki temel özelliği (Gölge DOM ve Özel Öğeler) destekler. Safari, Safari 10'da Gölge DOM v1 desteği sundu ve WebKit'te Custom Elements v1 uygulamasını tamamladı. Firefox şu anda Shadow DOM ve CustomElements v1'i geliştirmektedir ve hem Shadow DOM hem de Custom Elements Edge yol haritasında yer almaktadır.
v1 uygulamasını kullanarak yeni bir özel öğe tanımlamak için, ES6 söz dizimini kullanarak HTMLElement öğesini genişleten yeni bir sınıf oluşturup tarayıcıya kaydetmeniz yeterlidir:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Yeni v1 özellikleri son derece güçlüdür. Başlamanıza yardımcı olmak için Custom Elements v1 ve Gölge DOM v1'in kullanımıyla ilgili eğiticiler derledik.
webcomponents.org
Web Bileşeni topluluğu da hızla büyüyor. Geliştiricilerin öğelerini paylaşabilecekleri entegre bir katalog içeren, web bileşenleri topluluğunun odak noktası olan güncellenmiş bir webcomponents.org sitesinin lansmanını görmekten heyecan duyuyoruz.
webcomponents.org sitesinde Web Bileşenleri spesifikasyonları, web bileşenleri topluluğundan alınan güncellemeler ve içerikler ile diğer geliştiriciler tarafından oluşturulan açık kaynak öğeler ve öğe koleksiyonları için dokümanlar görüntülenir.
Google'ın Polymer'i gibi bir kitaplığı kullanarak ilk öğenizi oluşturmaya başlayabilir veya doğrudan alt seviye Web Bileşeni API'lerini kullanabilirsiniz. Daha sonra, öğenizi webcomponents.org adresinde yayınlayın.
Bileşenlere ayırmada başarılar!