Polymer基本概念

Polymer的哲学

Everything is an element

三层架构：

1. WebComponent，并非所有浏览器支持
2. Polymer的库

   The Polymer library provides a declarative syntax that makes it simpler to define custom elements. And it adds features like two-way data binding, property observation, and gesture support help you build powerful, reusable elements.

3. 元素，core和paper（为什么起这两个名字）

关于自定义的元素

1. 声明（必须带有-）
2. 注册（不需要你来干）
3. use it

元素是可以继承的（最典型就是button了）
自定义元素有两种，一种是可见的，一种是不可见的，不管怎么样，WebComponent不需要focus在这里

Shadow Dom 和 LightDom

Shadow DOM separates content from presentation thereby eliminating naming conflicts and improving code expression.

ShadowDom不是Polymer的概念而是html5的概念

• LightDom
• ShadowDom
• ComposedDom

官方文档
相关材料-待研究

ShadowDom的概念在于

<polymer-element name="my-custom-element" noscript>
  <template>
    <span>People say: </span>
      <content select="q"></content> 
    <footer>sometimes</footer>
  </template>
</polymer-element>

The span, content, and footer elements are encapsulated within the custom element and hidden from the rest of the page.

LightDom是面对终端用户的，

<my-custom-element>
  <q>Hello World</q> <!-- part of my-custom-element's light DOM -->
</my-custom-element>

The light DOM of is visible to the end-user of the element as a normal subtree. The end-user can access .childNodes, .children, .innerHTML, or any other property or method that gives information about a node’s subtree.
.childNodes, .children, .innerHTML,是用document.querySelector选出来的东西，childNodes, children, innerHTML是看不见shadowDom的内容的。谁用my-custom-element都可以屏蔽my-custom-element里头的内容？

关于HTML5 shadowDom和选择器（css）

ShadowDom - 001，key, document, createShadowRoot, template, content.select

css and styling
:host
:host-context

<style>
  #host::shadow span {
    color: red;
  }
</style>

<div id="host">
  <span>Light DOM</span>
</div>

<script>
  var host = document.querySelector('div');
  var root = host.createShadowRoot();
  root.innerHTML = "<span>Shadow DOM</span>" + 
                   "<content></content>";
</script>

::shadow选择器可以进去shadowDom，但是进不去LightDom
/deep/ The /deep/ combinator is similar to ::shadow, but more powerful. It completely ignores all shadow boundaries and crosses into any number of shadow trees. Put simply, /deep/ allows you to drill into an element's guts and target any node.

::content+::shadow=/deep/

WebComponent Polyfills

webcomponents.js 为现代浏览器提供WebComponent支持

This is a collection of libraries (or “polyfills”) for new web technologies that haven’t shipped yet across all browsers. The web components polyfills make it possible for developers to use these standards today across all modern browsers. As these technologies are implemented in browsers, the polyfills will shrink and you’ll gain the benefits of native implementations.

以前它叫platform.js.