Web Component Nedir?

Web Component, tarayıcıların doğal olarak desteklediği ve herhangi bir framework'e bağlı olmayan, yeniden kullanılabilir HTML öğeleri oluşturma standardıdır. Üç temel teknolojiden oluşur:

• Custom Elements: customElements.define() ile kendi HTML etiketinizi (ör. <greeting-card>) tanımlarsınız.
• Shadow DOM: Öğenin iç yapısını ve stillerini sayfanın geri kalanından yalıtır.
• HTML Templates: <template> ve <slot> ile yeniden kullanılabilir işaretleme tanımlanır.

Vue bileşeni ile farkı

Vue bileşenleri yalnızca bir Vue uygulamasının içinde çalışır. Web Component ise saf bir HTML sayfasında, React veya Angular uygulamasında, hatta hiçbir framework olmadan kullanılabilir. Vue, bir bileşeni Web Component'e dönüştürmek için defineCustomElement fonksiyonunu sunar (bkz. Vue.js Custom Element Nedir?).

import { defineCustomElement } from 'vue';

// Vue bileşenini bir Web Component sınıfına dönüştür
const GreetingCard = defineCustomElement({
  props: { name: String },
  template: `<p class="card">Merhaba, {{ name }}!</p>`,
  styles: [
    `.card { padding: 12px 16px; border-radius: 8px; background: #28e98c; color: #1f1f1f; }`,
  ],
});

customElements.define('greeting-card', GreetingCard);

// Artık normal bir HTML etiketi gibi kullanılabilir
document.body.innerHTML += '<greeting-card name="Dünya"></greeting-card>';

Ne zaman tercih edilir?

• Bir bileşeni farklı teknolojilerle yazılmış projelerde paylaşmanız gerektiğinde (tasarım sistemi, gömülebilir widget).
• Stillerin sayfadan tamamen yalıtılması gerektiğinde.

Tek bir Vue uygulaması içinde ise normal Vue bileşenleri daha pratiktir: Vue'nun reaktivite, slot ve geliştirici araçları desteğinden tam olarak yararlanırsınız.