# Buliding and Styling Web Components
## Hiroki Tani @hiloki, Frontend Developer, CSS Architect
## CSS features ≒ faults - 詳細度、カスケーディング - マークアップとの依存関係 - **スコープがない**
## CSS Methodology - **OOCSS** - **SMACSS** - **BEM**
```html
Search
```
```css .b-search {...} .b-search--header {...} .b-search__input {...} .Input {...} .Buton {...} .Buton--default {...} ```
## Web Components
## Web Components - Templates - Custom Elements - Shadow DOM - HTML Imports
## Templates ```html
Search
```
## Custom Elements ```html
```
## Custom Elements ```js var element = Object.create(HTMLElement.prototype); document.registerElement( 'ui-search', { prototype: element } ); ```
## Shadow DOM ```js element.createdCallback = function() { var template = document.querySelector('#ui-search-template'); var content = template.content; var shadowRoot = this.createShadowRoot(); shadowRoot.appendChild(document.importNode(content, true)); }; ```
```html
```
http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5
## HTML Imports ```html
```
## ブラウザの対応状況 | Polyfill | IE10 | IE11+ | Chrome* | Firefox* | Safari 7+* | Chrome Android* | Mobile Safari* | | ---------- |:----:|:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:| | Custom Elements | ~ | ~ | **✓** | ~ | ~ | **✓** | ~ | | HTML Imports | ~ | ~ | **✓** | ~ | ~ | **✓** | ~ | | Shadow DOM | ~ | ~ | **✓** | ~ | ~ | **✓** | ~ | | Templates | ~ | ~ | **✓** | **✓**| **✓** | **✓** | **✓** | http://webcomponents.org/
## webcomponents.js | Polyfill | IE10 | IE11+ | Chrome* | Firefox* | Safari 7+* | Chrome Android* | Mobile Safari* | | ---------- |:----:|:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:| | Custom Elements | ~ | **✓** | **✓** | **✓** | **✓** | **✓**| **✓** | | HTML Imports | ~ | **✓** | **✓** | **✓** | **✓**| **✓**| **✓** | | Shadow DOM | **✓** | **✓** | **✓** | **✓** | **✓** | **✓** | **✓** | | Templates | **✓** | **✓** | **✓** | **✓**| **✓** | **✓** | **✓** | https://github.com/webcomponents/webcomponentsjs
## Polymer
 https://www.polymer-project.org/
```js
```
## How to build a component?
 http://customelements.io/
## MAGIC of Shadow DOM http://codepen.io/hiloki/pen/qEodQZ
- `
` - `:host` - `:host(selecter)` - `::shadow` - `::content`
## Callout http://codepen.io/hiloki/pen/VYXMQa
## Theming - `::shadow`を使う - `:host()`を使う - `:host-context()`を使う
## Grid http://codepen.io/hiloki/pen/EaEwoB
## Modifier - クラスセレクタを使う - 属性セレクタを使う
## Tooltip http://codepen.io/hiloki/pen/yyKRWZ
## Attribute - 属性値を使う
## Nested - コンポーネントを組み合わせる
## Deep Combinator .light
/deep/
.shadow { ... }
## Shadow-piercing Descendant Combinator .light
>>>
.shadow { ... }
## Sexy Checkbox http://codepen.io/hiloki/pen/JoLeWb/
## Extends - 既存要素を継承する
## Accessible Web Components
https://www.youtube.com/watch?v=HCKiTslXmRI
## Re:Sexy Checkbox http://codepen.io/hiloki/pen/dPmQeZ/
### podcast-player http://codepen.io/hiloki/pen/xbWQzq/ ### time-elements https://github.com/github/time-elements ### lazyload-image https://1000ch.github.io/lazyload-image/
## Finally
道を知っていることと、
歩くことは違う
There's a difference between knowing the path and walking the path.
Morpheus, "Matrix"
## Thanks - http://twitter.com/hiloki - http://github.com/hiloki
HTML Slide by
Talkie