文档章节

Polymer基本概念

Finley.Hamilton
 Finley.Hamilton
发布于 2014/12/15 16:46
字数 540
阅读 81
收藏 0

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.

  1. 元素,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 <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.

© 著作权归作者所有

下一篇: Vert.x学习
Finley.Hamilton

Finley.Hamilton

粉丝 5
博文 45
码字总数 15431
作品 0
广州
私信 提问
Polymer 更新路线图,3.0 将于 I / O 大会上正式发布

在 2013 年的 Google I/O 大会上,Google 对外发布了 Web UI 框架 Polymer 。作为亲儿子,之后在每年的 Google I/O 大会上基本都能看到 Polymer 的身影,Polymer 也不出意料地将在下周的 I/...

王练
2018/05/06
1K
1
Polymer 2.0 候选版发布,Google 的 Web 组件构建库

Polymer 2.0 候选版发布了,该版本功能完整,包含来自社区的预发布反馈,修正了在预览期间提交的主要问题,并在所有支持的浏览器上进行了测试。 新的库比以前更加模块化,针对原生浏览器(如...

王练
2017/03/09
1K
2
使用Yeoman和Polymer创建Web应用

  Allo’Allo’。大多数人都很清楚高效的Web应用开发有多重要。在你进行某些乏味的项目开发时,你会因为各种令你头痛的事情而感到焦虑、烦躁,比如寻找项目模板、配置项目基础架构、开发环...

彬Goooo
2014/04/03
2.9K
2
polymer1.0 Behaviors

Polymer supports extending custom element prototypes with shared code modules called behaviors. A behavior is an object that looks similar to a typical Polymer prototype. A beha......

孟飞阳
2018/05/02
19
0
Polymer中文网:http://polymer-zh.cn

Polymer中文网:http://polymer-zh.cn

helloclia
2016/12/09
988
1

没有更多内容

加载失败,请刷新页面

加载更多

x002-语言元素

变量命令规则 硬性规则: 变量名由字母(广义的Unicode字符,不包括特殊字符)、数字和下划线构成,数字不能开头。 大小写敏感(大写的a和小写的A是两个不同的变量)。 不要跟关键字(有特殊...

伟大源于勇敢的开始
今天
4
0
nginx反向代理配置

nginx配置文件位置/usr/local/nginx/conf/nginx.conf 配置文件修改: # cd /usr/local/nginx/conf # vim nginx.conf server {listen 80;server_name localhost;#charset k......

行者终成事
今天
5
0
OSChina 周日乱弹 —— 这是假的,和我之前的不一样

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
15
1
Rust学习笔记一 数据类型

写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差。 自学了Java、Kotlin、Python、...

MusiCodeXY
今天
5
0
Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部