WebComponents (jegyzet saját részre)

Figyelem: ha bármit parancssorba másolunk copy-paste megoldással, akkor a parancssorban vagy a fejlesztői felület fájljában a ” és a – és a −− karatkereket írjuk újra át kézzel a saját billentyűzetről, különben valamilyen karakterkódolási probléma miatt hibára futunk!

  • Webcomponent: a képernyő egy részének a kinézetéért és működéséért felelős
  • legjobb példák komponensekre: szabványos HTML elemek – ezek tkp. egymástól független, szeparált egységek, melyek a képernyő egy részének a működéséért felelősek
  • Igény: jó lenne saját komponenseket készíteni …
  • erre korábban is volt lehetőség, pl. jQuery User Interface könyvtár, de ezeket a könyvtárakat használni jóval bonyolultabb, mint amit most a webcomponent szabványok lehetővé tesznek

Olyan szabványok összessége, amelyek lehetővé teszik saját készítésű webalkalmazásokhoz komponensek fejlesztését, amit mint (nyitó és zárótag-gel ellátott) html elemet tudunk beágyazni a webalkalmazásunkba; JavaScript könyvtártól és keretrendszertől függetlenül működnek; a böngésző támogatottsága még nem teljes körű; azaz a szabvány még nem jutott el minden böngészőbe, viszont a webcomponent-eket nem önmagukban használjuk, hanem fejlesztést segítő könyvtárak léteznek, amelyek elfedik az inplementáció nehézségeit.

Szabványok:

  • Custom Elements (egyedi elemek): a szabványos DOM bővítése új, saját elemekkel; elkülönülnek a natív HTML elemektől; Custom Elements API segítségével hozhatóak létre;
  • Shadow Dom: olyan funkció, ami lehetővé teszi a böngésző számára, hogy DOM elemeket jelenítsen meg anélkül, hogy a DOM fába ágyazná; a webalkalmazás fejlesztője nem férhet hozzá az árnyék DOM-hoz mint a beágyazott elemek esetében, de a böngésző képes megjeleníteni; a részfa: árnyékfa (shadow tree); az az elem, amihez a shadow tree kapcsolódik, az az árnyékgazda (shadow host); kapcsolás a JavaScript fájlban a Element.attachShadow() paranccsal (részletesen: itt);
  • ez tkp. a DOM fa és a kapcsolódó stílusok egységbe zárása; a webcomponent egy külön, zárt egység lesz a webalkalmazáson belül; a componentnek vannak bemenetei, amelyekkel szabályozhatjuk a megjelenését, azonban az alkalmazás nem láthat bele a komponentbe. Pl. webalkalmazásban definiált CSS szelektor illeszkedik a webcomponent-re, mégsem fordulhat elő, hogy ez módosítaná a webcomponent megjelenését.
  • ES Modules: a JavaScript kódrészletek újrafelhasználható egységekbe zárása
  • HTML Template: újrafelhasználható HTML sablonok definiálása;

Webcomponent – nem kifejezetten elterjedt technológiá; jó néhány éve itt vannak; a technológiának nem lett túl nagy sikere; oka: ma már nem írnak webalkalmazást csak JavaScriptre alapozva, hanem valamilyen fejlesztői könyvtárt vagy keretrendszert használunk, s ezek a keretrendszerek már tartalmaznak megoldást arra, hogy újrafelhasználható komponenseket írjunk az adott technológián belül; Az a tulajdonság, hogy a webkomponenseket keretrendszertől függetlenül tudjuk használni, úgy látszik, annyira nem vonzó a fejlesztők számára.

Könyvtárak: LitElement, Polymer, Stencil

www.github.com/PolymerLabs/lit-element-starter-js

nagy zöld gomb: code > download zip; megnyitás: VS Code; feldobja, hogy telepítsük a megfelelő bővítményeket; ha nem tettük volna, akkor a bővítmény telepítése: .vscode mappa extensions.json file tartalmazza a telepítendő bővítmények listáját: “recommendations”: [“runem.lit-plugin”]; itt csak egy bővítmény: runem.lit-plugin

  • a my-element.js lesz a lényeg, a többi csak körítés
  • dev mappa: egy mintaprojektet tartalmaz, amivel a komponensünket tudjuk kipróbálni
  • docs, docs-src: a fejlesztést segítő dokumentációt tartalmazzák
  • test mappa: webalkalmazáshoz tudunk teszteket készíteni
  • eslintrc.json: statikus kódelemző eszköz konfigurációja; statikus kódelemző: futtatás nélkül vizsgálja a kódot; különböző anti-patterneket keres

a my-element.js a készítendő webkomponens forrásfájlját tartalmazza; a package.json fájl tartalmazza, hogy az alkalmazás milyen külső könyvtárakat és azok melyik verzióját használja; ezeket telepíteni kell; futtatás: integrated terminal: npm install; létrejön a node_modules mappa; parancs: npm run serve – elindítja a mintaprojektet, amivel a webkomponensünket tudjuk tesztelni; url: http://localhost:8000/dev (per dev!)

my-element.js: a :host{ } szelektor a komponens gyökérelemét jelöli ki, itt tudunk olyan css szabályokat adni, amelyek a komponens egészére érvényesek; a properties(){} mezőnél tudjuk a komponens bemeneteit definiálni;pl. title:{type:String}; render(){return html`<h1>${this.title}</h1> …; ezt a bemenetet adhatjuk meg neki kívülről az index.html-ben: <my-element title=”Ez_lesz_a_cím”>…</my-element>

A render metódus adja vissza a komponenshez tartozó html kódot. A <slot></slot> tag-ek közé kerülnek majd be a kívülről beinjektált tartalmak az index.html-ből, azaz a két tag között renderelődik be az, amit a <my-element></my-element> tag-ek közé írtunk.

Komponens átnevezése: replace In Files: my-element > na91-card; myElement > na91Card; my-element.js > na91-card.js; a név első része a szerzőre, a második része a funkcióra utal; globálisan egyedi kell hogy legyen a névütközés elkerülése miatt;

A webkomponens a webalkalmazáson belül egy elszeparált egységként működik, az inspectorban az <na91-card … > alatt ez áll: #shadow-root, ami a webkomponens elszeparált dom fája; ha a webalkalmazás index.html <style>…</style> részében definiálunk egy stílusszabályt, akkor az csak az injektált tartalomra érvényes (a <slot>…</slot>-ban); maga a webkomponens (a nem injektált tartalomra) saját magának definiálja a stílusszabályokat, a kívülről definiált szabályok nem érvényesek rá; a :host{}-ban definiált szabályok az egész webkomponensre érvényesek (öröklődnek), alatta viszont felülírhatjuk azt egy-egy elemre szelektorokkal;pl. return css `:host{color:red} h1{color:green}` a webkomponensen belül;

Ha csak a :host{}-ban adunk meg stílusszabályt, azt felülírhatja az index.html <style>…</style>-ban megadott stílusszabály, de ha a :host{} alatt adunk meg külön szelektorral stílusszabályt a return css “-en belül, akkor azt már nem írja felül.

webkomponens: az na91-card.js-ben beleégetett tartalom; injektált tartalom: az index.html-ben a <na91-card>…</na91-card>-on belül írt tartalom;

font betöltése: index.html; link a Google fonts-ról: <link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap” rel=”stylesheet”>; a na91-card.js css :host részéhez: font-family: ‘Roboto’, sans-serif;

az index.html-ben a na91-card{} is lehet szelektor és ugyanúgy stílusozható!

A “package.json” fájlban található egy “docs:build” nevű szkript, ennek a futtatásával tudjuk előállítani a webkomponensünkhöz tartozó bundle fájlt. Ez olyan fájl, amely tartalmaz minden függőséget és elég an npm-re publikálni. A parancs: npm run docs:build; a bundle a “docs/komponens-neve.bundled.js” fájlban lesz elérhető;

Létre kell hozni egy npm package-t, ehhez először hozzunk létre egy új mappát; a mappában hozzunk létre egy új fájlt, ez legyen a komponens-neve.js fájl; ebbe másoljuk be az előzőleg létrehozott bundle tartalmát. Adjuk ki az npm init parancsot; ez létrehozza a package.json fájlt. Hozzunk létre egy README.md fájlt, amibe az eredeti index.html-t másoljuk be, hogy a felhasználó tudja, hogy hogyan kell használni a komponensünket.

Publikálás a https://www.npmjs.com oldalra; regisztrációköteles; parancssor:npm login, majd npm pack, majd npm public; csomaghoz patch készítése: npm version patch; npm publish; A komponenst webalkalmazásban használhatjuk, ekkor a parancs a telepítéshez:(itt bugos a WordPress: a parancssor nem tudja értelmezni az innen kimásolt ‐‐ jelet, ezért azt írjuk át a billenytűzetről a parancssorban: ‐‐save) npm install pacakge-név ‐‐save (előtte package.json file létrehozása: npm init); csomag uninstallálása a package-ből: npm uninstall; csomag eltávolítása az npm oldalról: npm unpublish;

tetszőleges html oldal kódjába betehetjük: <na91-card>…</na91-card>; előtte bekötni a na+1-card.js-t: <script type=”module” src=”node_modules/na91-card/na91-card.js”></script>

saját webkomponens: na91-card

Shadow tree létrehozása JavaScript fájlban:

A <new-tag></new-tag>-et beillesztjük az index.html-be.

Vagy:

Vagy:

There are two limitations: We can create only one shadow root per element. The elem must be either a custom element, or one of: “article”, “aside”, “blockquote”, “body”, “div”, “footer”, “h1…h6”, “header”, “main” “nav”, “p”, “section”, or “span”. Other elements, like , can’t host shadow tree. The mode option sets the encapsulation level. It must have any of two values: “open” – the shadow root is available as elem.shadowRoot. Any code is able to access the shadow tree of elem. “closed” – elem.shadowRoot is always null. Forrás: https://javascript.info/shadow-dom

Shadow DOM is strongly delimited from the main document: 1., Shadow DOM elements are not visible to querySelector from the light DOM. In particular, Shadow DOM elements may have ids that conflict with those in the light DOM. They must be unique only within the shadow tree. 2., Shadow DOM has own stylesheets. Style rules from the outer DOM don’t get applied.