Polimer - Gölge DOM ve Stil
Shadow DOM, bileşenleri oluşturmak için kullanılan yeni bir DOM özelliğidir.
Example
Aşağıdaki kodda, başlık bileşeni, sayfa başlığını ve menü düğmesini içerir.
<header-demo>
<header>
<h1>
<button>Gölge DOM, çocukları kapsamlı bir alt ağaçta bulmaya izin verir. shadow tree.
<header-demo>
#shadow-root
<header>
<h1>
<button>Gölge-kök kökü, gölge ağacın tepesi olarak adlandırılır ve ağaca eklenen eleman ise gölge ana bilgisayarı (başlık-demo) olarak adlandırılır. Bu gölge ana bilgisayarı, gölge kökünü belirten shadowRoot adlı bir özellik içerir. Gölge kökü, bir ana bilgisayar özelliği kullanarak barındırma öğesini tanımlar.
Gölge DOM ve Kompozisyon
Gölge DOM'da bir öğe varsa, öğenin alt öğeleri yerine gölge ağaç işlenebilir. Öğenin alt öğeleri, gölge ağacına <slot> öğesi eklenerek oluşturulabilir.
Örneğin, <header-demo> için aşağıdaki gölge ağacını kullanın.
<header>
<h1><slot></slot></h1>
<button>Menu</button>
</header>Alt başlıkları <başlığım> öğesine şu şekilde ekleyin:
<header-demo>Shadow DOM</header-demo>Başlık, </slot> öğesini yukarıda belirtilen alt öğelerle değiştirir -
<header-demo>
<header>
<h1>Shadow DOM</h1>
<button>Menu</button>
</header>
</header-demo>Yedek İçerik
Yuvaya atanmış düğüm olmadığında yedek içerik görüntülenebilir. Örneğin -
<my-element>
#shadow-root
<slot id = "myimgicon">
<img src = "img-demo.png">
</slot>
<slot></slot>
<my-element>Bir öğe için kendi simgenizi şu şekilde sağlayabilirsiniz:
<my-element>
<img slot = "myimgicon" src = "warning.png">
<my-element>Çok Seviyeli Dağıtım
Yuva öğesini, çok seviyeli dağıtım olarak bilinen bir yuvaya tahsis edebilirsiniz.
Örneğin, aşağıda gösterildiği gibi bir gölge ağacının iki seviyesini alın -
<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">Aşağıdaki kodu düşünün -
<parent-element>
<p>This is light DOM</p>
<parent-element>Düzleştirilmiş bir ağacın yapısı aşağıdaki gibidir.
<parent-element>
<child-element>
<div>
<slot id = "child-slot">
<slot id = "parent-slot">
<p>This is light DOM</p>Shadow DOM, dağıtımı kontrol etmek için aşağıdaki Slot API'lerini kullanır -
HTMLElement.assignedSlot - Yuvayı bir öğe için ayırır ve bir öğenin bir yuvaya tahsis edilmesi yoksa boş döndürür.
HTMLSlotElement.assignedNodes - Düzleştirme seçeneğini true olarak ayarladığınızda, yuvayla birlikte düğümlerin listesini sağlar ve dağıtılmış düğümleri döndürür.
HTMLSlotElement.slotchange - Bu olay, yuvanın dağıtılmış düğümlerinde değişiklik olduğunda tetiklenir.
Etkinliği Yeniden Hedefleme
Öğenin dinleme öğesi ile aynı kapsamda temsil edilebileceği olayın hedefini belirtir. İçindeki bir öğenin aksine, özel öğe etiketinden geliyormuş gibi görünen özel bir öğeden bir etkinlik sağlar.
Example
Aşağıdaki örnek, Polymer.js'de olay yeniden hedeflemenin kullanımını gösterir. İndex.html adlı bir dosya oluşturun ve aşağıdaki kodu içine yerleştirin.
<!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>Şimdi retarget-event.html adında başka bir dosya oluşturun ve aşağıdaki kodu ekleyin.
<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
Uygulamayı çalıştırmak için, oluşturulan proje dizinine gidin ve aşağıdaki komutu çalıştırın.
polymer serveŞimdi tarayıcıyı açın ve şuraya gidin: http://127.0.0.1:8081/. Aşağıdakiler çıktı olacaktır.
Aşağıdaki ekran görüntüsünde gösterildiği gibi yeniden hedeflenen bir etkinliği görmek için yukarıdaki metne tıklayın ve konsolu açın.
Gölge DOM Şekillendirme
Ana bilgisayardan gölge ağaca devralan stil özelliklerini kullanarak gölge DOM'u biçimlendirebilirsiniz.
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>DOM Şablonu Oluşturma
DOM alt ağacı, DOM şablon oluşturma kullanılarak bir öğe için oluşturulabilir. Öğe için gölge kökü oluşturabilir ve bir öğeye DOM şablonu ekleyerek şablonu bir gölge ağaca kopyalayabilirsiniz.
DOM şablonu iki şekilde belirtilebilir -
Bir id özniteliğiyle birlikte bir öğenin adıyla eşleşmesi gereken bir <dom-module> öğesi oluşturun.
<dom-module> içinde bir <template> öğesi tanımlayın.
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>Bir Öğenin Gölge DOM'sunun Stili
Gölge DOM, yazı tipleri, metin renkleri ve sınıflar gibi stil özelliklerini kullanarak, öğenizin kapsamı dışında uygulamadan özel öğelerin stilize edilmesini sağlar.
Şimdi barındırma öğesini kullanarak :hostselector (gölge DOM'a eklenen bir öğe ana bilgisayar olarak adlandırılır). Polimer-app.html adlı bir dosya oluşturun ve içine aşağıdaki kodu ekleyin.
<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>Uygulamayı önceki bölümde gösterildiği gibi çalıştırın ve şuraya gidin:http://127.0.0.1:8000/. Aşağıdakiler çıktı olacaktır.
Stil Yuvalı İçerik
Yaratmak mümkündür slots çalışma zamanında işgal edilen bir öğenin şablonunda.
Example
Aşağıdaki örnek, öğenin şablonunda yuvalı içeriğin kullanımını tasvir etmektedir. Bir index.html dosyası oluşturun ve içine aşağıdaki kodu ekleyin.
<!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>Şimdi slotted-content.html adlı başka bir dosya oluşturun ve aşağıdaki kodu ekleyin.
<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>Uygulamayı önceki örnekte gösterildiği gibi çalıştırın ve şuraya gidin: http://127.0.0.1:8081/. Aşağıdakiler çıktı olacaktır.
Stil Modüllerini Kullanma
Stil modülleri ile birlikte stilleri öğeler arasında paylaşabilirsiniz. Stil modülünde stilleri belirtin ve bunları öğeler arasında paylaşın.
Example
Aşağıdaki örnek, öğeler arasında stil modülünün nasıl kullanılacağını gösterir. Bir index.html dosyası oluşturun ve içine aşağıdaki kodu ekleyin.
<!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>Aşağıdaki kodla style-module.html adlı başka bir dosya oluşturun.
<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>Şimdi, aşağıdaki kodda gösterildiği gibi öğelere stil modüllerini sağlayan renkler-module.html adında bir dosya daha oluşturun .
<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>Uygulamayı çalıştırın ve şuraya gidin: http://127.0.0.1:8081/. Aşağıdakiler çıktı olacaktır.
Özel Özellikleri Kullan
Özel CSS özellikleri, Polimer öğesi kullanılarak uygulamanızdaki öğenin görünümünü biçimlendirmek için kullanılabilir. Özel özellikler, stil verilerini bir stil sayfası aracılığıyla dağıtmaktan uzak tutan özel öğelerin ortamının dışında kullanılabilen basamaklı CSS değişkenleri sağlar.
Özel özellikler, oluşturulan DOM ağacından miras alınan standart CSS özelliklerine benzer şekilde tanımlanabilir. Önceki örnekte, öğeler için tanımlanan özel CSS özelliklerini görebilirsiniz.
CSS mirası kapsamında, bir öğe için tanımlanmış bir stil yoksa, aşağıdaki kodda gösterildiği gibi stili üst öğesinden devralır.
<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>