M

MLOG

Hrvatski

Istražite snagu web komponenata, s naglaskom na prilagođene elemente, za izradu višekratno iskoristivih i enkapsuliranih UI komponenata za različite web aplikacije.

Web komponente: Dubinski uvid u prilagođene elemente

Web komponente predstavljaju značajan napredak u web razvoju, nudeći standardiziran način za stvaranje višekratno iskoristivih i enkapsuliranih UI komponenata. Među temeljnim tehnologijama koje čine web komponente, prilagođeni elementi (Custom Elements) ističu se kao kamen temeljac za definiranje novih HTML oznaka s prilagođenim ponašanjem i prikazom. Ovaj sveobuhvatni vodič zaranja u zamršenosti prilagođenih elemenata, istražujući njihove prednosti, implementaciju i najbolje prakse za izradu modernih web aplikacija.

Što su web komponente?

Web komponente su skup web standarda koji programerima omogućuju stvaranje višekratno iskoristivih, enkapsuliranih i interoperabilnih HTML elemenata. Nude modularan pristup web razvoju, omogućujući stvaranje prilagođenih UI komponenata koje se mogu lako dijeliti i ponovno koristiti u različitim projektima i radnim okvirima (frameworks). Ključne tehnologije koje stoje iza web komponenata uključuju:

Razumijevanje prilagođenih elemenata

Prilagođeni elementi su u srcu web komponenata, omogućujući programerima da prošire HTML vokabular vlastitim elementima. Ovi prilagođeni elementi ponašaju se kao standardni HTML elementi, ali mogu biti prilagođeni specifičnim potrebama aplikacije, pružajući veću fleksibilnost i organizaciju koda.

Definiranje prilagođenih elemenata

Da biste definirali prilagođeni element, morate koristiti metodu customElements.define(). Ova metoda prima dva argumenta:

  1. Naziv elementa: String koji predstavlja naziv prilagođenog elementa. Naziv mora sadržavati crticu (-) kako bi se izbjegli sukobi sa standardnim HTML elementima. Na primjer, my-element je valjan naziv, dok myelement nije.
  2. Klasa elementa: JavaScript klasa koja proširuje HTMLElement i definira ponašanje prilagođenog elementa.

Evo osnovnog primjera:

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

customElements.define('my-element', MyElement);

U ovom primjeru definiramo prilagođeni element nazvan my-element. Klasa MyElement proširuje HTMLElement i postavlja unutarnji HTML elementa na "Hello, World!" u konstruktoru.

Povratni pozivi (callbacks) životnog ciklusa prilagođenog elementa

Prilagođeni elementi imaju nekoliko povratnih poziva životnog ciklusa koji vam omogućuju izvršavanje koda u različitim fazama životnog ciklusa elementa. Ovi povratni pozivi pružaju prilike za inicijalizaciju elementa, odgovaranje na promjene atributa i čišćenje resursa kada se element ukloni iz DOM-a.

Evo primjera koji demonstrira upotrebu povratnih poziva životnog ciklusa:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `
Spojeno na DOM!
`;
    console.log('Element connected');
  }

  disconnectedCallback() {
    console.log('Element disconnected');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);

U ovom primjeru, connectedCallback() ispisuje poruku u konzolu i postavlja unutarnji HTML elementa kada je spojen na DOM. disconnectedCallback() ispisuje poruku kada se element odspoji. attributeChangedCallback() se poziva kada se promijeni atribut data-message, ažurirajući sadržaj elementa u skladu s tim. Getter observedAttributes specificira da želimo promatrati promjene na atributu data-message.

Korištenje Shadow DOM-a za enkapsulaciju

Shadow DOM pruža enkapsulaciju za web komponente, omogućujući vam stvaranje zasebnog DOM stabla za komponentu koje je izolirano od ostatka stranice. To znači da stilovi i skripte definirani unutar Shadow DOM-a neće utjecati na ostatak stranice, i obrnuto. Ova enkapsulacija pomaže u sprječavanju sukoba i osigurava predvidljivo ponašanje vaših komponenata.

Da biste koristili Shadow DOM, možete pozvati metodu attachShadow() na elementu. Ova metoda prima objekt s opcijama koji specificira način rada (mode) Shadow DOM-a. mode može biti ili 'open' ili 'closed'. Ako je način 'open', Shadow DOM-u se može pristupiti iz JavaScripta pomoću svojstva shadowRoot elementa. Ako je način 'closed', Shadow DOM-u se ne može pristupiti iz JavaScripta.

Evo primjera koji demonstrira upotrebu Shadow DOM-a:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
Ovo je unutar Shadow DOM-a.

    `;
  }
}

customElements.define('my-element', MyElement);

U ovom primjeru, priključujemo Shadow DOM na element s mode: 'open'. Zatim postavljamo unutarnji HTML Shadow DOM-a tako da uključuje stil koji postavlja boju odlomaka na plavu i element odlomka s nekim tekstom. Stil definiran unutar Shadow DOM-a primijenit će se samo na elemente unutar Shadow DOM-a i neće utjecati na odlomke izvan Shadow DOM-a.

Prednosti korištenja prilagođenih elemenata

Prilagođeni elementi nude nekoliko prednosti za web razvoj:

Praktični primjeri prilagođenih elemenata

Istražimo neke praktične primjere kako se prilagođeni elementi mogu koristiti za izradu uobičajenih UI komponenata.

Jednostavna komponenta brojača

Ovaj primjer demonstrira kako stvoriti jednostavnu komponentu brojača pomoću prilagođenih elemenata.

class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        
        ${this._count}
        
      

    `;
  }
}

customElements.define('my-counter', Counter);

Ovaj kod definira klasu Counter koja proširuje HTMLElement. Konstruktor inicijalizira komponentu, priključuje Shadow DOM i postavlja početnu vrijednost brojača na 0. Metoda connectedCallback() dodaje osluškivače događaja na gumbe za povećanje i smanjenje. Metode increment() i decrement() ažuriraju brojač i pozivaju metodu render() za ažuriranje prikaza komponente. Metoda render() postavlja unutarnji HTML Shadow DOM-a tako da uključuje prikaz brojača i gumbe.

Komponenta vrtuljka sa slikama

Ovaj primjer demonstrira kako stvoriti komponentu vrtuljka sa slikama pomoću prilagođenih elemenata. Radi sažetosti, izvori slika su rezervirana mjesta (placeholders) i mogli bi se dinamički učitavati s API-ja, CMS-a ili lokalne pohrane. Stilovi su također minimizirani.

class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  Carousel Image
  

  
  
  

  

  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

Ovaj kod definira klasu ImageCarousel koja proširuje HTMLElement. Konstruktor inicijalizira komponentu, priključuje Shadow DOM i postavlja početni niz slika i trenutni indeks. Metoda connectedCallback() dodaje osluškivače događaja na gumbe za prethodnu i sljedeću sliku. Metode nextImage() i prevImage() ažuriraju trenutni indeks i pozivaju metodu render() za ažuriranje prikaza komponente. Metoda render() postavlja unutarnji HTML Shadow DOM-a tako da uključuje trenutnu sliku i gumbe.

Najbolje prakse za rad s prilagođenim elementima

Evo nekoliko najboljih praksi koje treba slijediti pri radu s prilagođenim elementima:

Prilagođeni elementi i radni okviri (Frameworks)

Prilagođeni elementi dizajnirani su da budu interoperabilni s drugim web tehnologijama i radnim okvirima. Mogu se koristiti u kombinaciji s popularnim radnim okvirima kao što su React, Angular i Vue.js.

Korištenje prilagođenih elemenata u Reactu

Da biste koristili prilagođene elemente u Reactu, možete ih jednostavno renderirati kao bilo koji drugi HTML element. Međutim, možda ćete morati koristiti ref da biste pristupili temeljnom DOM elementu i izravno komunicirali s njim.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Pristupanje API-ju prilagođenog elementa
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Primljen prilagođeni događaj:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

U ovom primjeru koristimo ref za pristup prilagođenom elementu my-element i dodajemo mu osluškivač događaja. To nam omogućuje da osluškujemo prilagođene događaje koje šalje prilagođeni element i reagiramo u skladu s tim.

Korištenje prilagođenih elemenata u Angularu

Da biste koristili prilagođene elemente u Angularu, morate konfigurirati Angular da prepozna prilagođeni element. To se može učiniti dodavanjem prilagođenog elementa u polje schemas u konfiguraciji modula.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Nakon što je prilagođeni element registriran, možete ga koristiti u svojim Angular predlošcima kao bilo koji drugi HTML element.

Korištenje prilagođenih elemenata u Vue.js

Vue.js također nativno podržava prilagođene elemente. Možete ih koristiti izravno u svojim predlošcima bez posebne konfiguracije.

Vue će automatski prepoznati prilagođeni element i ispravno ga renderirati.

Razmatranja o pristupačnosti

Prilikom izrade prilagođenih elemenata, ključno je uzeti u obzir pristupačnost kako bi se osiguralo da su vaše komponente upotrebljive svima, uključujući osobe s invaliditetom. Evo nekoliko ključnih razmatranja o pristupačnosti:

Internacionalizacija i lokalizacija

Prilikom razvoja prilagođenih elemenata za globalnu publiku, važno je uzeti u obzir internacionalizaciju (i18n) i lokalizaciju (l10n). Evo nekoliko ključnih razmatranja:

Zaključak

Prilagođeni elementi moćan su alat za izradu višekratno iskoristivih i enkapsuliranih UI komponenata. Nude nekoliko prednosti za web razvoj, uključujući višekratnu iskoristivost, enkapsulaciju, interoperabilnost, održivost i performanse. Slijedeći najbolje prakse navedene u ovom vodiču, možete iskoristiti prilagođene elemente za izradu modernih web aplikacija koje su robusne, održive i pristupačne globalnoj publici. Kako se web standardi nastavljaju razvijati, web komponente, uključujući prilagođene elemente, postat će sve važnije za stvaranje modularnih i skalabilnih web aplikacija.

Prihvatite snagu prilagođenih elemenata kako biste gradili budućnost weba, komponentu po komponentu. Ne zaboravite uzeti u obzir pristupačnost, internacionalizaciju i lokalizaciju kako biste osigurali da su vaše komponente upotrebljive svima, svugdje.