Polimer - Shadow DOM dan Styling

Shadow DOM adalah properti baru DOM yang digunakan untuk membangun komponen.

Example

Pada kode berikut, komponen header meliputi judul halaman dan tombol menu.

<header-demo>
   <header>
      <h1>
         <button>

Shadow DOM memungkinkan menemukan anak-anak dalam subpohon bercakupan, yang disebut shadow tree.

<header-demo>
   #shadow-root
   <header>
      <h1>
      <button>

Root shadow-root disebut sebagai bagian atas shadow tree dan elemen yang dilampirkan ke pohon disebut shadow host (header-demo). Shadow host ini menyertakan properti yang disebut shadowRoot, yang menentukan shadow root. Root bayangan mengidentifikasi elemen host menggunakan properti host.

Shadow DOM dan Komposisi

Pohon bayangan bisa dirender sebagai ganti anak elemen, jika ada elemen di shadow DOM. Anak-anak elemen bisa dirender dengan menambahkan elemen <slot> ke pohon bayangan.

Misalnya, gunakan pohon bayangan berikut untuk <header-demo>.

<header>
   <h1><slot></slot></h1>
   &ltbutton>Menu</button>
</header>

Tambahkan anak-anak ke elemen <my-header> sebagai -

<header-demo>Shadow DOM</header-demo>

Header menggantikan elemen </slot> dengan turunan yang ditentukan di atas sebagai -

<header-demo>
   <header>
      <h1>Shadow DOM</h1>
      <button>Menu</button>
   </header>
</header-demo>

Konten Cadangan

Konten fallback dapat ditampilkan jika tidak ada node yang dialokasikan ke slot. Misalnya -

<my-element>
   #shadow-root
   <slot id = "myimgicon">
      <img src = "img-demo.png">
   </slot>
   <slot></slot>
<my-element>

Anda dapat memberikan ikon Anda sendiri untuk elemen sebagai -

<my-element>
   <img slot = "myimgicon" src = "warning.png">
<my-element>

Distribusi Multi Level

Anda dapat mengalokasikan elemen slot ke slot, yang dikenal sebagai distribusi berjenjang.

Misalnya, ambil dua tingkat pohon bayangan seperti yang ditunjukkan di bawah ini -

<parent-element>
   #shadow-root
      <child-element>
      <!-- display the light DOM children of parent-element inside child-element -->
      <slot id = "parent-slot">
	  
   <child-element>
      #shadow-root
         <div>
            <!-- Render the light DOM children inside div by using child-element -->
            <slot id = "child-slot">

Perhatikan kode berikut -

<parent-element>
   <p>This is light DOM</p>
<parent-element>

Struktur pohon pipih terlihat seperti berikut ini.

<parent-element>
   <child-element>
      <div>
         <slot id = "child-slot">
            <slot id = "parent-slot">
               <p>This is light DOM</p>

Shadow DOM menggunakan Slot API berikut untuk memeriksa distribusi -

  • HTMLElement.assignedSlot - Ini mengalokasikan slot untuk elemen dan mengembalikan null, jika tidak ada alokasi elemen ke slot.

  • HTMLSlotElement.assignedNodes - Ini menyediakan daftar node bersama dengan slot dan mengembalikan node terdistribusi, saat Anda menyetel opsi flatten ke true.

  • HTMLSlotElement.slotchange - Peristiwa ini dipicu saat ada perubahan di node terdistribusi slot.

Penargetan Ulang Acara

Ini menentukan target acara di mana elemen dapat direpresentasikan dalam cakupan yang sama dengan elemen pendengar. Ini menyediakan peristiwa dari elemen khusus, yang sepertinya berasal dari tag elemen khusus, bukan dari elemen di dalamnya.

Example

Contoh berikut menunjukkan penggunaan penargetan ulang peristiwa di Polymer.js. Buat file bernama index.html dan masukkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "retarget-event.html">
   </head>
   
   <body>
      <template id = "myapp" is = "dom-bind">
         <retarget-event on-tap = "clicky"></retarget-event>
      </template>
      
      <script>
         var myval = document.querySelector('#myapp');
         myval.clicky = function(e) {
            console.log("The retargeted result:", Polymer.dom(myval));
            console.log("Normal result:", e);
         };
      </script>
   </body>
</html>

Sekarang, buat file lain bernama retarget-event.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "retarget-event">

   <template>
      <span>Click on this text to see result in console...</span>
   </template>

   <script>
      Polymer ({
         is: 'retarget-event',
      });
   </script>
</dom-module>

Output

Untuk menjalankan aplikasi, buka direktori proyek yang dibuat dan jalankan perintah berikut.

polymer serve

Sekarang buka browser dan arahkan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Klik teks di atas dan buka konsol untuk melihat acara yang ditargetkan ulang seperti yang ditunjukkan pada tangkapan layar berikut.

Gaya Shadow DOM

Anda bisa mengatur gaya shadow DOM menggunakan properti gaya, yang diwarisi dari host ke pohon bayangan.

Example

<style>
   .mydemo { background-color: grey; }
</style>

<my-element>
#shadow-root
   <style>
      //this div will have blue background color
      div { background-color: orange; }
   </style>
   <div class = "mydemo">Demo</div>

Pembuatan Template DOM

Subpohon DOM dapat dibuat untuk elemen menggunakan template DOM. Anda bisa membuat shadow root untuk elemen dan menyalin template ke pohon bayangan dengan menambahkan template DOM ke sebuah elemen.

Template DOM dapat ditentukan dengan dua cara -

  • Buat elemen <dom-module>, yang harus cocok dengan nama elemen bersama dengan atribut id.

  • Tentukan elemen <template> di dalam <dom-module>.

Example

<dom-module id = "my-template">
   <template>I am in my template!!!</template>

   <script>
      class MyTemplate extends Polymer.Element {
         static get is() { return  'my-template' }
      }
      customElements.define(MyTemplate.is, MyTemplate);
   </script>
</dom-module>

Mendesain Shadow DOM Elemen

Shadow DOM memungkinkan untuk memberi gaya pada elemen khusus menggunakan properti penataan seperti font, warna teks, dan kelas, tanpa menerapkannya di luar cakupan elemen Anda.

Mari memberi gaya elemen host menggunakan :hostselector (elemen yang dilampirkan ke shadow DOM disebut sebagai host). Buat file bernama polymer-app.html dan tambahkan kode berikut di dalamnya.

<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">

<dom-module id = "polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>	
  </template>

  <script>
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String, value: 'Welcome to Tutorialspoint!!!'
               }
            };
         }
      }

      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

Jalankan aplikasi seperti yang ditunjukkan pada bab sebelumnya dan arahkan kehttp://127.0.0.1:8000/. Berikut akan menjadi keluarannya.

Gaya Konten Slotted

Itu mungkin untuk dibuat slots dalam template elemen, yang ditempati pada waktu proses.

Example

Contoh berikut menggambarkan penggunaan konten berlubang di template elemen. Buat file index.html dan tambahkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "slotted-content.html">
   </head>
   
   <body>
      <slotted-content>
         <div slot = "text">This is Polymer.JS Slotted Content Example</div>
      </slotted-content> 
   </body>
</html>

Sekarang buat file lain bernama slotted-content.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = "slotted-content">
   <template>
      <style>
         ::slotted(*) {
            font-family: sans-serif;
            color:#E94A9D;
         }
      </style>
      
      <h2>Hello...[[prop1]]</h2>
      <h3>
         <div><slot name='text'></slot></div>
      </h3>
   </template>
   
   <script>
      Polymer ({
         is: 'slotted-content', properties: {
            prop1: {
               type: String,
               value: 'Welcome to Tutorialspoint!!',
            },
         },
      });
   </script>
</dom-module>

Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya, dan navigasikan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Menggunakan Modul Gaya

Anda dapat berbagi gaya antar elemen bersama dengan modul gaya. Tentukan gaya dalam modul gaya, dan bagikan di antara elemen.

Example

Contoh berikut menunjukkan cara menggunakan modul gaya di antara elemen. Buat file index.html dan tambahkan kode berikut di dalamnya.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "style-module.html">
   </head>
   
   <body>
      <style-module></style-module> 
   </body>
</html>

Buat file lain bernama style-module.html dengan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = "style-module">
   <template>
      <!-- here, including the imported styles from colors-module page -->
      <style include="colors-module"></style>
      <style>
         :host {
            font-family: sans-serif;
            color: green;    
         }
      </style>
      
      <h2>Hello...[[prop1]]</h2>
      <p class = "color1">Sharing styles with style modules 1...</p>
      <p class = "color2">Sharing styles with style modules 2...</p>
      <p class = "color3">Sharing styles with style modules 3...</p>
   </template>
   
   <script>
      Polymer ({
         is: 'style-module', properties: {
            prop1: {
               type: String, value: 'Welcome to Tutorialspoint!!',
            },
         },
      });
   </script>
</dom-module>

Sekarang, buat satu file lagi bernama colors-module.html , yang menyediakan modul gaya ke elemen seperti yang ditunjukkan pada kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = 'colors-module'>
   <template>
      <style>
         p.color1 {
            color: #EA5AA5;
         }
         p.color2 {
            color: #4B61EA;
         }
         p.color3 {
            color: #D3AA0A;
         }
      </style>
   </template>
</dom-module>

Jalankan aplikasi dan arahkan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Gunakan Properti Kustom

Properti CSS khusus dapat digunakan untuk mengatur gaya tampilan elemen dalam aplikasi Anda menggunakan elemen Polymer. Properti khusus menyediakan variabel CSS bertingkat, yang dapat digunakan di luar lingkungan elemen khusus yang mencegah penyebaran data gaya melalui stylesheet.

Properti khusus dapat didefinisikan mirip dengan properti CSS standar, yang diwarisi dari pohon DOM yang disusun. Pada contoh sebelumnya, Anda dapat melihat properti CSS khusus yang ditentukan untuk elemen.

Di bawah pewarisan CSS, jika tidak ada gaya yang ditentukan untuk suatu elemen, maka itu akan mewarisi gaya dari induknya seperti yang ditunjukkan pada kode berikut.

<link rel = "import" href = "components/polymer/myelement-style.html">
<myelement-style>
   <style is = "myelement-style">
      p {
         color: var(--paper-red-900);
      }
      paper-checkbox {
         --paper-checkbox-checked-color: var(--paper-red-900);
      }
   </style>
</myelement-style>

<body>
   <p><paper-checkbox>Check Here</paper-checkbox></p>
</body>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved