JavaScript Academy · Oppitunti

Mukautettujen elementtien määrittäminen

Rekisteröikää elementtejä customElements-API:lla.

Oppitunti 1/413 vaihetta

Mukautettujen elementtien määrittäminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä mukautetut elementit ovat

Mukautettujen elementtien avulla voitte määrittää omia HTML-tageja, joita tukevat JavaScript-luokat. Sen sijaan että kokoaisitte käyttöliittymän div-sotkusta, voitte luoda uudelleenkäytettävän ja itsenäisen komponentin, kuten <user-card>.

Ne kuuluvat Web Components -standardiin.
Ne toimivat selaimissa natiivisti ilman kehyksiä.
Mukautetun elementin nimen on sisällettävä yhdysmerkki (esimerkiksi my-button).

customElements-rekisteri

window.customElements. Rekisteröikää uusi tagi kutsumalla metodia customElements.define(name, constructor).

Kun tagi on määritetty, jokainen dokumentin vastaava tagi muunnetaan luokkanne ilmentymäksi.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

HTMLElement-luokan laajentaminen

Mukautettu elementti on luokka, joka extends HTMLElement. Perusluokka antaa elementillenne kaikki DOM:n vakiotoiminnot, kuten attribuutit, tapahtumat ja tyylit.

Kutsukaa konstruktorissa aina ensin super()-metodia, jotta elementti alustetaan oikein.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Sisällön hahmontaminen

Elementin sisällä voitte määrittää this.innerHTML-ominaisuuden tai käyttää DOM-metodeja sisällön muodostamiseen. Yleinen toimintatapa on hahmontaa sisältö, kun elementti yhdistetään sivulle.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Elementin käyttäminen HTML:ssä

Rekisteröinnin jälkeen voitte käyttää tagia aivan kuten mitä tahansa sisäänrakennettua elementtiä. Voitte sijoittaa sen suoraan merkkauskoodiin tai luoda sen document.createElement-metodilla.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Konstruktorin säännöt

Konstruktori suoritetaan, kun ilmentymä luodaan. Sitä koskevat tiukat säännöt:

Kutsukaa ensin super()-metodia.
Älkää tutkiko tai lisätkö attribuutteja tai lapsielementtejä tässä vaiheessa.
Siirtäkää DOM-käsittely connectedCallback-metodiin.

Käyttäkää konstruktoria vain alkutilan määrittämiseen ja tapahtumankuuntelijoiden alustamiseen.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Toiminnallisuuden lisääminen

Koska elementtisi on todellinen DOM-solmu, voit liittää siihen tapahtumankuuntelijoita ja päivittää sen sisältöä vuorovaikutuksen perusteella.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Yhdysmerkkivaatimus

Mukautettujen elementtien nimissä on oltava yhdysmerkki. Näin varmistetaan, etteivät ne ole ristiriidassa nykyisten tai tulevien sisäänrakennettujen HTML-elementtien kanssa.

my-widget on kelvollinen.
mywidget on virheellinen ja aiheuttaa virheen.
Nimissä kirjainkoolla ei ole merkitystä, mutta ne kirjoitetaan pienillä kirjaimilla.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined ja get

Kaksi hyödyllistä rekisterimetodia:

customElements.get(name) palauttaa konstruktorin tai undefined, jos nimeä ei ole rekisteröity.
customElements.whenDefined(name) palauttaa Promisen, joka valmistuu, kun elementti on määritetty.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Määrittäminen vain kerran

Kukin nimi voidaan rekisteröidä vain kerran. define-metodin kutsuminen jo käytössä olevalla nimellä aiheuttaa virheen. Estäkää kaksoisrekisteröinti jaetuissa moduuleissa.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Miksi mukautetuilla elementeillä on merkitystä

Mukautetut elementit tarjoavat kehyksistä riippumattoman, kapseloidun ja uudelleenkäytettävän käyttöliittymän. Ne:

Yhtenäistävät komponenttien uudelleenkäytön teknologiasta riippumatta.
Integroituvat luontevasti selaimen omaan elinkaareen.
Toimivat luontevasti yhdessä Shadow DOMin ja templatien kanssa (käsitellään myöhemmin).

Pikatarkistus

Testaa, miten hyvin ymmärrät mukautettujen elementtien määrittämisen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit määrittämään mukautettuja elementtejä:

customElements.define(name, class) rekisteröi tagin.
Luokka extends HTMLElement ja kutsuu ensin super()-metodia.
Nimissä on oltava yhdysmerkki.
Renderöi sisältö connectedCallback-metodissa, ei konstruktorissa.
get ja whenDefined auttavat tarkistamaan rekisteröinnin tilan.

Seuraavaksi tutustumme mukautetun elementin koko elinkaareen.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Mukautettujen elementtien määrittäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Mukautettujen elementtien määrittäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Mukautettujen elementtien määrittäminen”?

Rekisteröikää elementtejä customElements-API:lla. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Mukautettujen elementtien määrittäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Mukautettujen elementtien määrittäminen
Elinkaarikutsut
Shadow DOM ja kapselointi
Templatet ja slotit

← Takaisin: JavaScript Academy