WEB COMPONENTS VE GELECEĞİ

4 min readJun 29, 2021

Nedir?

Web components yeniden kullanılabilir custom html elementleri oluşturmamıza, bunları web sayfalarımızda ve web uygulamalarınızda kullanmamıza olanak tanıyan bir özellik dizisidir. Yazılan custom component, herhangi bir javascript kütüphanesi veya framework ile birlikte kullanılabilir veya bunlara ihtiyaç duymadan kullanılabilir. React, vue, angular gibi kütüphanelerin sunmuş olduğu component özelliğini, web components sayesinde kendimiz üretebiliyoruz.

Web Components 3 ana özellikten oluşur.

*Custom elements

*Shadow DOM

*HTML template

Custom Elements

Kendimize has DOM elementleri (yani html etiketleri) oluşturabilmemizi sağlar, lifecycle methodları vardır.

Yaşam döngüsü methodları:
constructor() = > element oluşturulduğunda çağırılır.
connectedCallback() => element dom üzerinde yerleştirildiği anda çağrılır.
disconnectedCallback() => element dom üzerinden silinme anında çağırılır.
attributeChangeCallback(attributeName, oldVal, newVal) => componentin attribute’larından biri değiştiğinde çağırılır.

Shadow Dom

Var olan herhangi bir DOM öğesinden oluşturulabilen kapsüllenmiş DOM nesnesidir. Amacı, güvenli ve kapsüllenmiş bir snippet sağlamaktır. Style ve markup ı enkapsüle eder böylece componentin stillerinin scoped olup olmamasını sağlar. element.attachShadow() şeklinde oluşturulur. Elementle iletişimimizi sağlayan bir shadowRoot oluşturur.

Html Templates

<template> Oluşturacağımız bileşenin şablonudur. Component’in kapsüllenmiş yapısını tanımlar. Html ve css hatta JavaScript içerir. Slot (child element) kullanmamıza olanak sağlar.

Nasıl Kulllanılır?

Mevcut bir web componenti herhangi bir module bundler olmadan şu şekilde projemize dahil ederek kullanabiliriz.

<script type=”module” src=“my-button.js”></script>
… 
<my-button raised class=”indigo”>raised</my-button>

Kullanım Örneği

Nasıl Oluşturulur?

HtmlElements sınıfından extends edilen custom bir class tanımlanır .

class MyComponent extends HTMLElement {
 constructor() {
  super();
  this.innerHTML = 'Hello World';
 }
}

Oluşturulan bu class customElements.define() metodu ile oluşturmak istediğiniz etiket adına tanımlanır.

window.customElements.define('my-component', MyComponent);

Artık <my-component></my-component> adıyla yeni bi html elementimiz yani web componentimiz var.

Komponentimizin kapsüllenmiş olması için yani css veya diğer özelliklerinin override olmaması için attachShadow ve template özelliklerinden yararlanmamız gerekiyor. Bunu da bir örnek uygulama ile göstermek istiyorum.

Örnek Uygulama

Burada örnek olması için basit bir accordion component hazırlayalım.

const template = document.createElement('template');template.innerHTML = `
<div class="accordion">
    <div class="accordion-title active">Web Components Nedir!</div>
    <div class="accordion-content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque veritatis commodi soluta nihil iure rem!</div>
</div>
`;
class Accordion extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}window.customElements.define('accordion-component', Accordion);

shadowRoot aynı dom modelindeki gibi içerisindeki bütün nesnelere erişerek manipüle edebilmemizi sağlıyor.

Sayfamızda aşağıdaki şekilde kullanabiliriz.

<accordion-component></accordion-component>

Biraz css ekleyince eli yüzü düzelecektir.

<style>
* {
box-sizing: border-box;
}
.accordion {
margin: 0 auto;
max-width: 600px;
font-family: 'Roboto', sans-serif;
color: #23303d;
}
.accordion-title {
font-size: 22px;
background-color: #f8f9f9;
margin-bottom: 10px;
height: 70px;
padding: 20px;
padding-right: 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
cursor: pointer;
}
.accordion-title:after {
content: '';
height: 10px;
width: 10px;
border-right: 2px solid #23303d;
border-top: 2px solid #23303d;
transform: rotate(45deg);
position: absolute;
right: 20px;
transition: all .3s ease;
}
.accordion-title:after {
transform: rotate(135deg);
}
.accordion.active .accordion-title:after {
transform: rotate(45deg);
}
.accordion .accordion-content {
font-weight: 300;
line-height: 1.71;
letter-spacing: normal;
max-height: 0;
transition: all .3s ease;
overflow: hidden;
}
.accordion.active .accordion-content {
max-height: 300px;
}
</style>

Komponentimizi dinamik data ile beslemek istiyorsak javascript ile bunu kolaylıkla yapabiliyoruz. Öncelikle title ve content attribute larını ekleyelim:

<accordion-component title="Web Components nedir?" content="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim modi sint dolorum eligendi quisquam"></accordion-component>

ve bunları constructor içinde şöyle set edelim:

this.shadowRoot.querySelector('.accordion-title').innerText = this.getAttribute('title');this.shadowRoot.querySelector('.accordion-content').innerText = this.getAttribute('content');

Web components slot kullanımını da destekliyor. Mesela contentimizi slot olarak verelim:

<accordion-component title="Web Components nedir?">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim modi sint dolorum eligendi quisquam </accordion-component>

ve temlate içinde <slot/> tag i ile yakalayalım:

<div class="accordion-content"><slot/></div>

Şimdi sıra event binding kısmına geldi. Title kısmına tıklayınca içeriği gizleyip gösteren bir toggle function ı yazalım ve constructor içinde tanımladığımız showContent property si ile state i kontrol edelim.

Click eventini bind edebilmemiz için lifecycle metodlarına ihtiyacımız var. connectedCallback() methodu içinde event listener ekleyip disconnectedCallback() methodu içinde ise kaldıralım.

connectedCallback() {
this.shadowRoot.querySelector('.accordion-title').addEventListener('click', () => this.toggle());
}disconnectedCallback() {
this.shadowRoot.querySelector('.accordion-title').removeEventListener();
}

Kodumuzun son hali :

Accordion Component

Vue js ve Reack js içerisinde kullanım örneklerini inceleyebilirsiniz.

Vue js içinde kullanım örneği

React js içinde kullanım örneği

Web Components in geleceği?

Web componentleri bütün browserlar tarafından destekleniyor ve henüz Türkiye’de fazla yaygın olmasa da dünya genelinde bir çok firma tarafından kullanılıyor.

Extra hiç bir teknolojiye gerek kalmadan komponent oluşturmak harika ancak sıfırdan yazmak biraz zor veya angarya gelebilir. Neyse ki, custom elements oluşturmayı daha kolay hale getirecek ve size çok fazla zaman ve emek kazandıracak harika kütüphaneler var.

Kullanacağınız sadece bir kaç elementle sınırlıysa web componentleri ham haliyle kullanmak en iyisi. Ancak çok fazla elemente ihityacınız varsa hazır library ler kodunuzu daha basit ve temiz hale getirebilir ve iş akışınızı daha verimli hale getirebilir.

Komunitinin listelediği desteklenen web components kütüphaneleri şunlar:

1- Hybrids

2-LitElement

3-Polymer

4-Skate.js

5-Slim.js

6-Stencil

Bunlardan son zamanlarda benim de adını sık duyduğum Typscript i destekleyen Polymer, LitElement ve Ionic ekibinin geliştirmiş olduğu Stencil geniş kullanıma sahip. Burada vue js projesinde lit element kullanımına bir örnek verelim:

Özellikle Polymer i productionda kullanan uygulamaları, şirketleri görünce şaşırmamak elde değil.

Şahsen web components ve kütüphaneleri ile yapılabilecekler beni heyecanlandırdı. Siz de bunlardan birini tercih ederek daha performanslı ve okunaklı kodlar yazabilirsiniz.