Web bileşenleri tarayıcılar arası destek kazanıyor, topluluk hızla büyüyor ve tam olarak ihtiyacınız olan bileşeni bulabileceğiniz yepyeni bir Web Bileşenleri kataloğu var.
Birden fazla projede kolayca kullanabileceğiniz veya kullandıkları JavaScript çerçevesine bakılmaksızın diğer geliştiricilerle paylaşabileceğiniz kendi bağımsız JavaScript bileşeninizi oluşturmak istediniz mi? Web bileşenleri sizin için uygun olabilir.
Web bileşenleri, kendi HTML öğelerinizi oluşturmanıza olanak tanıyan yeni web platformu özellikleridir. Her yeni özel öğe, <my-button> gibi bir özel etikete sahip olabilir ve yerleşik öğelerin tüm avantajlarına sahip olabilir. Özel öğeler, özelliklere ve yöntemlere sahip olabilir, etkinlikleri tetikleyip bunlara yanıt verebilir ve hatta kendi görünüm ve tarzlarını sunmak için kapsayıcı bir stile ve DOM ağacına sahip olabilir.
Web bileşenleri, platform tabanlı, düşük 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 primitifleri içeren platform API'leriyle oluşturulduğundan bu bileşenleri diğer JavaScript kitaplıklarında veya çerçevelerinde standart DOM öğeleri gibi kullanabilirsiniz.
Web Components'i daha önce duymuş olabilirsiniz. Web Components spesifikasyonunun erken bir sürümü olan v0, Chrome 33'te kullanıma sunuldu.
Günümüzde tarayıcı tedarikçileri arasındaki geniş işbirliği sayesinde Web Bileşenleri spesifikasyonunun yeni nesli (v1) geniş destek görüyor. Chrome, Web Bileşenleri'ni oluşturan iki ana spesifikasyonu (Gölge DOM ve Özel Öğeler) sırasıyla Chrome 53 ve Chrome 54'ten itibaren desteklemektedir. Safari, Safari 10'da Gölge DOM 1. sürümü için destek yayınladı ve WebKit'te Özel Öğeler 1. sürümü'nün uygulanmasını tamamladı. Firefox şu anda Shadow DOM ve Özel Öğeler v1'i geliştiriyor. Hem Shadow DOM hem de Özel Öğeler, Edge'in yol haritasında yer alıyor.
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 kaydettirmeniz yeterlidir:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Yeni v1 spesifikasyonları son derece güçlüdür. Başlamanıza yardımcı olmak için Custom Elements v1 ve Shadow DOM v1'i kullanmayla ilgili eğitici içerikler hazırladık.
webcomponents.org
Web bileşeni topluluğu da hızla büyüyor. Web bileşenleri topluluğunun odak noktası olan webcomponents.org sitesinin güncellenmiş sürümünün kullanıma sunulduğunu görmekten heyecan duyuyoruz. Bu sürümde, geliştiricilerin öğelerini paylaşabilecekleri entegre bir katalog da yer alıyor.
webcomponents.org sitesi, Web Bileşenleri specs, web bileşenleri topluluğundan güncellemeler ve içerikler hakkında bilgi içerir. Ayrıca, diğer geliştiriciler tarafından oluşturulan açık kaynak öğeler ve öğe koleksiyonları ile ilgili dokümanları gösterir.
İlk öğenizi oluşturmaya Google'ın Polymer gibi bir kitaplığı kullanarak başlayabilir veya doğrudan düşük düzey Web Component API'lerini kullanabilirsiniz. Ardından öğenizi webcomponents.org'da yayınlayın.
İyi bir bileşen oluşturma deneyimi dileriz.