■ 外部の element を使うには、import し、
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
element をタグとして使う
<core-header-panel>
...
</core-header-panel>
■ 自分で element を作ることもできる
element を作るには、<polymer-element> を使って定義する
Shadow DOM （<template>）で他の element をカプセル化できる
ここで指定したスタイルはこのマークアップにだけ提供され、他のところに影響しない
Shadow DOM polyfill docs
公開されたプロパティ（この例だと "counter"）はマークアップから初期化でき、値が変更されたときは変更のハンドラーが呼ばれる
{{ }} でプロパティを直接マークアップにバンドルできる
element の定義で on-[event]（この例だと on-tap）属性を使ってイベントハンドラを function にバンドルできる
template の子は id 属性の値を使って、this.$.[id] で参照できる（この例だと this.$.counterVal）
<polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id="counterVal">{{counter}}</span><br>
<button on-tap="{{increment}}">Increment</button>
</template>
<script>
Polymer({
counter: 0, // Default value
counterChanged: function() {
this.$.counterVal.classList.add('highlight');
},
increment: function() {
this.counter++;
}
});
</script>
</polymer-element>
作った element をタグとして使う
<my-counter counter="10">Points</my-counter>
■ body unresolved
<body unresolved>
...
</body>
<body> の unresolved 属性は、カスタムエレメントのネイティブサポートが足りないブラウザでの flash of unstyled content (FOUC) を防ぐのに使われる
■ Tabの基本構成
<core-header-panel>
<core-toolbar>
<paper-tabs valueattr="name" selected="all" self-end>
<paper-tab name="all">ALL</paper-tab>
<paper-tab name="favorites">FAVORITES</paper-tab>
</paper-tabs>
</core-toolbar>
<!-- main page content will go here -->
</core-header-panel>
<paper-tab ...><img src="ic_all.png"></paper-tab>
のように画像もOK
■ 独自 element を1つの html ファイルにする
- 必要な element の import + <polymer-element>
- polymer-element の name 属性値をファイル名に使う（must じゃないが、そのほうがわかりやすい）
- 最後に Polymer({}); を呼んで element を登録する。これによりブラウザに認識される
post-card.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
<polymer-element name="post-card">
<template>
...
</template>
<script>
Polymer({});
</script>
</polymer-element>
Shadow DOM 内での :host pseudo-class は、独自 element 自身をさすことになる（上のコードだと <post-card> のスタイルを指定することになる）
<template>
<style>
:host {
...
}
</style>
...
</template>
■ 独自 element の子 element
<post-card>
<h2>hoge</h2>
</post-card>
のように、独自 element に子 element を入れる場合、insertion point を指定しないと描画されない
insertion point は <content> で作成する
<polymer-element name="post-card">
<template>
<style>
...
</style>
<div class="card-header" layout horizontal center>
<content select="img"></content>
<content select="h2"></content>
</div>
<content></content>
</template>
...
</polymer-element>
この場合、<post-card> 内の <img> は最初の content に挿入され、
<h2> は2番目の content に挿入され、
それ以外の子 element は最後の content に挿入される
子 element のスタイルには ::content pseudo element を使う
<polymer-element name="post-card">
<template>
<style>
...
polyfill-next-selector { content: ".card-header h2";}
.card-header ::content h2 {
margin: 0;
font-size: 1.8rem;
font-weight: 300;
}
polyfill-next-selector { content: ".card-header img";}
.card-header ::content img {
width: 70px;
border-radius: 50%;
margin: 10px;
}
</style>
...
</template>
...
</polymer-element>
Shadow DOM をネイティブにサポートしていないブラウザのために、
polyfill-next-selector を使って、::content ルールを non-shadow DOM ルールにどのように変換するかを指定する
0 件のコメント:
コメントを投稿