폴리머-Shadow DOM 및 스타일링
Shadow DOM은 구성 요소를 빌드하는 데 사용되는 DOM의 새로운 속성입니다.
Example
다음 코드에서 헤더 구성 요소에는 페이지 제목과 메뉴 버튼이 포함됩니다.
<header-demo>
<header>
<h1>
<button>Shadow DOM을 사용하면 범위가 지정된 하위 트리에서 하위 항목을 찾을 수 있습니다. shadow tree.
<header-demo>
#shadow-root
<header>
<h1>
<button>섀도우 루트 루트는 섀도우 트리의 상단이라고하고 트리에 부착 된 요소를 섀도우 호스트 (헤더 데모)라고합니다. 이 섀도우 호스트에는 섀도우 루트를 지정하는 shadowRoot라는 속성이 포함되어 있습니다. 섀도우 루트는 호스트 속성을 사용하여 호스트 요소를 식별합니다.
Shadow DOM 및 구성
Shadow DOM에 요소가있는 경우 요소의 자식 대신 그림자 트리를 렌더링 할 수 있습니다. 요소의 자식은 <slot> 요소를 그림자 트리에 추가하여 렌더링 할 수 있습니다.
예를 들어, <header-demo>에 대해 다음 그림자 트리를 사용하십시오.
<header>
<h1><slot></slot></h1>
<button>Menu</button>
</header><my-header> 요소에 자식을 다음과 같이 추가합니다.
<header-demo>Shadow DOM</header-demo>헤더는 </ slot> 요소를 위의 지정된 자식으로 대체합니다.
<header-demo>
<header>
<h1>Shadow DOM</h1>
<button>Menu</button>
</header>
</header-demo>대체 콘텐츠
대체 콘텐츠는 슬롯에 할당 된 노드가 없을 때 표시 될 수 있습니다. 예를 들어-
<my-element>
#shadow-root
<slot id = "myimgicon">
<img src = "img-demo.png">
</slot>
<slot></slot>
<my-element>다음과 같이 요소에 대한 자신의 아이콘을 제공 할 수 있습니다.
<my-element>
<img slot = "myimgicon" src = "warning.png">
<my-element>다단계 배포
슬롯 요소를 슬롯에 할당 할 수 있으며이를 다중 레벨 배포라고합니다.
예를 들어, 아래와 같이 두 단계의 그림자 트리를 사용하십시오.
<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">다음 코드를 고려하십시오-
<parent-element>
<p>This is light DOM</p>
<parent-element>평평한 나무의 구조는 다음과 같습니다.
<parent-element>
<child-element>
<div>
<slot id = "child-slot">
<slot id = "parent-slot">
<p>This is light DOM</p>Shadow DOM은 배포를 확인하기 위해 다음과 같은 Slot API를 사용합니다.
HTMLElement.assignedSlot − 요소에 대한 슬롯을 할당하고 슬롯에 요소가 할당되지 않은 경우 null을 반환합니다.
HTMLSlotElement.assignedNodes − flatten 옵션을 true로 설정하면 슬롯과 함께 노드 목록을 제공하고 분산 노드를 반환합니다.
HTMLSlotElement.slotchange −이 이벤트는 슬롯의 분산 노드에 변경 사항이있을 때 트리거됩니다.
이벤트 리 타게팅
요소가 청취 요소와 동일한 범위에 표시 될 수있는 이벤트의 대상을 지정합니다. 내부 요소가 아닌 사용자 정의 요소 태그에서 오는 것처럼 보이는 사용자 정의 요소의 이벤트를 제공합니다.
Example
다음 예제는 Polymer.js에서 이벤트 리 타게팅의 사용을 보여줍니다. index.html이라는 파일을 만들고 그 안에 다음 코드를 넣습니다.
<!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>이제 retarget-event.html이라는 다른 파일을 만들고 다음 코드를 포함합니다.
<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
애플리케이션을 실행하려면 생성 된 프로젝트 디렉터리로 이동하여 다음 명령을 실행합니다.
polymer serve이제 브라우저를 열고 http://127.0.0.1:8081/. 다음은 출력입니다.
위의 텍스트를 클릭하고 콘솔을 열어 다음 스크린 샷과 같이 리 타겟팅 된 이벤트를 확인합니다.
Shadow DOM 스타일링
호스트에서 섀도우 트리로 상속되는 스타일 속성을 사용하여 Shadow DOM의 스타일을 지정할 수 있습니다.
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 템플릿
DOM 템플릿을 사용하여 요소에 대해 DOM 하위 트리를 만들 수 있습니다. 요소에 대한 섀도우 루트를 생성하고 요소에 DOM 템플릿을 추가하여 템플릿을 섀도우 트리에 복사 할 수 있습니다.
DOM 템플릿은 두 가지 방법으로 지정할 수 있습니다.
id 속성과 함께 요소의 이름과 일치해야하는 <dom-module> 요소를 작성하십시오.
<dom-module> 안에 <template> 요소를 정의합니다.
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>요소의 Shadow DOM 스타일 지정
Shadow DOM을 사용하면 요소 범위 밖에서 적용하지 않고도 글꼴, 텍스트 색상 및 클래스와 같은 스타일 지정 속성을 사용하여 사용자 지정 요소의 스타일을 지정할 수 있습니다.
다음을 사용하여 호스트 요소의 스타일을 지정하겠습니다. :host선택자 (shadow DOM에 연결된 요소를 호스트라고 함). polymer-app.html이라는 파일을 만들고 다음 코드를 추가합니다.
<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>이전과 같이 응용 프로그램을 실행 장 및 탐색에http://127.0.0.1:8000/. 다음은 출력입니다.
스타일 슬롯 콘텐츠
만들 수 있습니다 slots 런타임에 사용되는 요소의 템플릿에서.
Example
다음 예는 요소의 템플릿에서 슬롯 콘텐츠를 사용하는 방법을 보여줍니다. index.html 파일을 만들고 다음 코드를 추가합니다.
<!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>이제 slotted-content.html이라는 다른 파일을 만들고 다음 코드를 포함합니다.
<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>이전 예제에 표시된대로 애플리케이션을 실행하고 http://127.0.0.1:8081/. 다음은 출력입니다.
스타일 모듈 사용
스타일 모듈과 함께 요소간에 스타일을 공유 할 수 있습니다. 스타일 모듈에서 스타일을 지정하고 요소간에 공유합니다.
Example
다음 예제는 요소간에 스타일 모듈을 사용하는 방법을 보여줍니다. index.html 파일을 만들고 다음 코드를 추가합니다.
<!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>다음 코드를 사용하여 style-module.html이라는 다른 파일을 만듭니다.
<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>이제 다음 코드와 같이 요소에 스타일 모듈을 제공하는 colors-module.html 이라는 파일을 하나 더 만듭니다 .
<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>응용 프로그램을 실행하고 다음으로 이동하십시오. http://127.0.0.1:8081/. 다음은 출력입니다.
사용자 지정 속성 사용
사용자 정의 CSS 속성은 Polymer 요소를 사용하여 애플리케이션에서 요소의 모양을 스타일링하는 데 사용할 수 있습니다. 사용자 지정 속성은 스타일 시트를 통해 스타일 데이터가 분산되지 않도록하는 사용자 지정 요소의 환경 외부에서 사용할 수있는 계단식 CSS 변수를 제공합니다.
사용자 정의 속성은 구성된 DOM 트리에서 상속되는 표준 CSS 속성과 유사하게 정의 할 수 있습니다. 이전 예제에서 요소에 대해 정의 된 사용자 정의 CSS 속성을 볼 수 있습니다.
CSS 상속에서 요소에 대해 정의 된 스타일이 없으면 다음 코드와 같이 부모에서 스타일을 상속합니다.
<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>