9. CUSTOM ELEMENTS
속성과 메서드 추가
// 1. HTML 객체 생성
var XTestProto = Object.create(HTMLElement.prototype);
// 2. ‘hi’ 메서드 추가
XTestProto.hi = function() { alert('안녕하세요.'); };
// 3. 읽기 전용 ‘bar’ 속성 설정
Object.defineProperty(XTestProto, "bar", {value: 5});
// 4. <x-test> 태그 등록. 태그명에는 '-'가 꼭 포함되어야 함.
var XTest = document.registerElement('x-test', { prototype: XTestProto
});
/*
JavaScript
HTML
10. CUSTOM ELEMENTS
Lifecycle callback
콜백 발생시점
createdCallback 인스턴스가 생성될 때
attachedCallback 생성된 인스턴스가 문서에 추가될때
detachedCallback 인스턴스가 문서에서 제거될 때
attributeChangedCallback
(attrName, oldVal, newVal)
속성이 변경될 때(추가/삭제/수정)
varproto=Object.create(HTMLElement.prototype);
//콜백 등록
proto.createdCallback=function(){... };
proto.attachedCallback=function(){... };
varXFoo=document.registerElement('x-foo',{prototype:proto});
11. CUSTOM ELEMENTS
컨텐츠가 포함된 custom element
var NTagProto = Object.create(HTMLElement.prototype);
NTagProto.createdCallback = function() {
this.innerHTML = "<b>반갑습니다~</b>";
};
var NTagHi = document.registerElement('n-tag-hi', { prototype: NTagProto
});
JavaScript
HTML
20. HTML IMPORTS
// TODO : import "./demo/some.html"
/*
var link = document.querySelector('link[rel="import"]');
var content = link.import;
var el = content.querySelector('div');
document.getElementById("content02").appendChild(el.cloneNode(true));
*/
JavaScript
23. HTML TEMPLATES
// 1. content 속성을 사용해 템플릿의 노드(#document-fragment)에 접근할 수 있다.
var content = document.getElementById("count").content;
// 2. 템플릿내의 DOM에 대한 작업을 한다.
var span = content.querySelector('span');
span.textContent = parseInt(span.textContent, 10) + 1;
// 3. 메인 DOM에 document.importNode()를 통해 추가한다.
document.getElementById("content03").appendChild(document.importNode(con
tent, true));
JavaScript
<template id="count">
<div>Template used: <span>0</span></div>
<script>alert('클릭하셨네요!');</script>
</template>
HTML
27. SHADOW DOM
Pesudo class
:host-context(selector)
host의 조상 요소들중 selector와 매칭되는 경우에만 host에 스타일을 지정
var host = document.getElementById('shadow_btn3');
var root = host.createShadowRoot();
// ShadowRoot를 host 하는 조상 요소들 중 매칭되는 경우에만 스타일을 지정
root.innerHTML = '<style>' +
':host-context(.host-context) { text-transform: uppercase; }' +
'</style>' +
'<content></content>';
JavaScript
<div class="host-context">
<button id="shadow_btn3">My Button</button>
</div>
HTML
28. SHADOW DOM
Pesudo element
::shadow
ShadowRoot를 갖는 요소
var host = document.getElementById('shadow_div');
var root = host.createShadowRoot();
root.innerHTML = '<span>Shadow DOM</span>' +
'<content></content>';
JavaScript
<style>#shadow_div::shadow span { color: red }</style>
<div id="shadow_div">
<span>Light DOM</span>
</div>
HTML
29. SHADOW DOM
<content> : host의 특정 요소를 출력(포함)
var host = document.getElementById('shadow_div06');
var root = host.createShadowRoot();
root.innerHTML = '<style>h3 { color: red; }
content[select="h3"]::content > h3 { color: green; }
::content section p { text-decoration: underline; }</style>
<h3>Shadow DOM</h3>
<content select="h3"></content>
<content select="section"></content>';
JavaScript
<div id="shadow_div06"><h3>Light DOM</h3>
<section>
<div>I'm not underlined</div>
<p>I'm underlined in Shadow DOM!</p>
</section></div>
HTML
31. SHADOW DOM
<shadow> : shadow root에서 shadow 요소를 출력(포함)
var host = document.getElementById('shadow_div7');
var root1 = host.createShadowRoot();
var root2 = host.createShadowRoot();
root1.innerHTML = '<div>루트 1</div><content></content>';
root2.innerHTML = '<div>루트 2</div><shadow></shadow>';
JavaScript
<div id="shadow_div7">Light DOM</div> HTML
32. SHADOW DOM
Element.getDistributedNodes()
<content>로 포함된 노드들을 접근할 수 있도록 한다.
var host = document.getElementById('shadow_div8');
var root = host.createShadowRoot();
// 템플릿을 ShadowRoot에 추가한다.
var template = document.getElementById('sdom');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
var html = [];
[].forEach.call(root.querySelectorAll('content'), function(el) {
html.push(el.select + ': ');
JavaScript
<div id="shadow_div8">
<span>HTML</span> <span>5</span>
<div>Shadow DOM</div>
<h5>footer</h5>
</div>
HTML
33. SHADOW DOM
Element.getDestinationInsertionPoints()
자신을 포함시킨 ShadowRoot 요소에 접근
var host = document.getElementById('shadow_div9');
var root1 = host.createShadowRoot();
var root2 = host.createShadowRoot();
root1.innerHTML = '<content select="h2"></content>';
root2.innerHTML = '<shadow></shadow>';
// 해당 요소를 ShadowRoot에 포함시킨 요소에 접근
var h2 = document.querySelector('#shadow_div9 h2');
var insertionPoints = h2.getDestinationInsertionPoints();
var html = [];
[].forEach.call(insertionPoints, function(contentEl) {
html.push(contentEl.outerHTML);
JavaScript
<div id="shadow_div9">
<h2>Light DOM</h2>
</div>
HTML
39. POLYMER 는
EVERGREEN BROWSER*에서
문제없는 실행을 목표.
*Evergreen Web Browser is a web browser
that updates itself without prompting the user.
http://tomdale.net/2013/05/evergreen-browsers/
40. POLYMER ELEMENTS : IRON ELEMENTS
유틸리티 요소와 공통적 UI 요소들의 모음
Ajax, 애니메이션, 드래그&드롭, 아이콘 모음, 툴팁, etc.
Iron Elements (35)
A set of visual and non-visual utility elements. Includes elements for working with
layout, user input, selection, and scaffolding apps
Name Description Tags Action
iron-a11y-announcer a11y, live
iron-a11y-keys
a11y,
input
A singleton
element that
simplifies
announcing
text to screen
readers.
A basic
element
implementation
of iron-a11y-
keys-behavior,
matching the
Search Elements
Products
All Elements
Iron Elements
Paper Elements
Google Web Components
Gold Elements
Neon Elements
Catalog
Fe
Md
Go
Au
Ne
https://elements.polymer-project.org/browse?package=iron-elements
41. POLYMER ELEMENTS : PAPER ELEMENTS
Material design*이 적용된 UI 요소들의 모음
버튼, 체크박스, 다이얼로그, 입력요소, 탭, 토스트, etc.
Paper Elements (31)
Paper elements are a set of visual elements that implement Google's Material
Design.
Name Description Tags Action
paper-badge
badge,
notification
paper-behaviors behavior
paper-button button
Material
design status
message for
elements
Common
behaviors
across the
paper
elements
Material
design
Search Elements
Products
All Elements
Iron Elements
Paper Elements
Google Web Components
Gold Elements
Neon Elements
Catalog
Fe
Md
Go
Au
Ne
https://elements.polymer-project.org/browse?package=paper-elements
44. 이미 만들어진 요소들을 사용하는 방법
<!-- paper elements -->
<paper-input label="이름을 입력하세요."><br>
<paper-checkbox>체크 1</paper-checkbox><br>
<paper-radio-button>선택 2</paper-radio-button>
HTML
45. 사용방법 #2 - 직접 요소를 생성
Step 1: 요소에 해당되는 페이지 작성
1. Polymer core를 페이지에 삽입
2. <dom-element>를 사용해 새로운 태그 등록
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-element name="사용자정의-태그" noscript>
<template>
<span>내용</span>
</template>
</dom-element>
<script>
// element registration
Polymer({
is: "사용자정의-태그",
ready:function(e) {
// when element is ready
},
hi: function() {
alert("안녕하세요~");
},
46. 사용방법 #2 - 직접 요소를 생성
Step 2: 사용될 페이지에서 요소 페이지 삽입 후, 태그로 선언
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="./파일.html">
</head>
<body>
<사용자정의-태그></사용자정의-태그>
</body>
47. 직접 생성한 요소를 사용하는 방법
JavaScript
<naver-search></naver-search> HTML
54. MOZILLA BRICK
모질라에서 개발한 UI 웹컴포넌트
Brick
Blog
Components
action
appbar
calendar
deck
flipbox
form
layout
menu
tabbar
storage-
indexeddb
Brick
Brick is a collection of UI components designed for the easy and quick building of
web application UIs. Brick components are built using the Web Components standard
to allow developers to describe the UI of their app using the HTML syntax they
already know.
Install
Brick can be installed using the Bower package manager:
bower install mozbrick/brick
To use Brick in your project, place the following in the <head>of your main HTML:
<script src="bower_components/brick/dist/platform/platform.js"></script>
<link rel="import" href="bower_components/brick/dist/brick.html">
https://mozbrick.github.io/
