Polymer基本概念

最新推荐文章于 2021-06-19 15:28:13 发布

weixin_34290352

最新推荐文章于 2021-06-19 15:28:13 发布

阅读量245

点赞数

原文链接：https://my.oschina.net/zuoyc/blog/356293

版权

为什么80%的码农都做不了架构师？>>>

Polymer的哲学

Everything is an element

三层架构：

WebComponent，并非所有浏览器支持
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.

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

关于自定义的元素

声明（必须带有-）
注册（不需要你来干）
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 <my-custom-element> 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.

转载于:https://my.oschina.net/zuoyc/blog/356293