— Polymer — 2 min read
主要概念:
需要注意的是:
Slots can only be selected explicitly, by slot name. It's impossible to select content implicitly, based on a tag name or an arbitrary selector like
:not(.header)
.
slot只能用slot name来区分、选中。不能用其他任意的css选择器。
各个slot之间的区域是互斥的,而且 只能选择top-level元素 (包括后面的::slotted(selector)
选择器)。
实际上就是可以在模版的slot里面写东西,作为一个默认值
多级slot嵌套。flatterning的时候规则是从外向里, 因此父节点的slot下面的lightDOM会渲染在子节点的LightDOM之下。
HTMLElement.assignedSlot
HTMLSlotElement.assignedNodes
HTMLSlotElement.slotchange(event)
Polymer.FlattenedNodesObserver
Polymer.FlattenedNodesObserver.getFlattenedNodes(node)
new Polymer.FlattenedNodesObserver(this.$.slot,(info)=>{})
详情参考https://www.polymer-project.org/2.0/docs/devguide/shadow-dom
因为shadowDOM不是每个浏览器都支持,所以使用了webcomponents.js中的shadyDOM和shadyCSS两个polyfills。
The polyfills use a combination of techniques to emulate shadow DOM:
Shady DOM
: Maintains the logical divisions of shadow tree and descendant tree internally, so children added to the light DOM or shadow DOM render correctly. Patches DOM APIs on affected elements in order to emulate the native shadow DOM APIs.Shady CSS
: Provides style encapsulation by adding classes to shadow DOM children and rewriting style rules so that they apply to the correct scope.
ShadyDOM主要原理是patch原生DOM API来提供跟native shadowDOM一致的接口。在内存中维护了一个保存LightDOM的children树和一个保存ShadowDOM的ShadowRoot树。但是实际上元素下面就是一颗渲染好的flatterned树。因为这个是就是实际上的用来渲染的树,所以不存在slot,因此shadyDOM polyfills方案里面的slot元素不参与事件传递。
ShadyCSS主要提供了原生ShadowDOM规则的支持和两个cssnext特性:CSS custom properties
和 custom property mixins
.
Scoped CSS特性的实现原理跟Vue相似:对元素的ShadowDOM添加class,并重写CSS的匹配规则。
ShadowDOM样式三大原则:
两个特殊伪类:
:host
/:host(selector)
选择分布式节点——::slotted()
slotted()
选择器右边不能写任何其他选择器。slotted(selector)
里面的selector只能是简单选择器,并且只能选择顶级元素。slotted(*)
选择默认的LightDOM(不包含有name值的slot)slotted(slot=tkw)
选择name为tkw的LightDOM兼容性写法,使用<custom-style>
标签包围main document里面的全局<style>
能避免在不支持shadowDOM v1规范的浏览器中全局css规则继续在shadowDOM中生效。
注意是避免CSS规则生效,而不是避免CSS样式的继承
custom-style元素不包含在Polymer中,需要引入:
主要是提供一个支持两个CSS Next语法的扩展版本:
——customvar
形式定义变量,然后通过var(--customvar,[defaultvar])
取值。:root{}
中,而Polymer则是不能在LightDOM中使用。Polymer默认不支持自定义属性集合,需要手动引入:
相当于cssnext对应的语法,但是同样可以在任何css Rule下使用。
动态更改css自定义属性的值。
注意当外层元素或者被继承元素里面已经定义了一个变量,那么当前再定义这个变量是无效的,需要手动调用该方法。这个行为类似于Less
获得当前自定义属性的值(需要区分原生和Polyfill)
By default, adding a DOM template to an element causes Polymer to create a shadow root for the element and clone the template into the shadow tree.
DOMTemplate是通过clone操作添加到shadow tree里面去的。 有三种方式定义一个DOM Template:
直接将模板写在<template>
标签里面, 是最直接的方式、最常见的方式。
字符串模板
通过继承或手动实现template getter获得模板. 注意:
默认对于所有从其他文件里面引入的组件里面元素所包含的链接Polymer是不做处理的,所有的相对路径的资源最后都是相对于主文档(main document)的路径。 但是我们可以使用下面两个特殊的标记
A static getter on the element class that defaults to the element HTML import document URL and is overridable. It may be useful to override importPath when an element's template is not retrieved from a
<dom-module>
or the element is not defined using an HTML import.
一个静态getter函数,默认指向该元素被HTML import时候的URL,也可以被重写。
An instance property set to the value of Polymer.rootPath which is globally settable and defaults to the main document URL. It may be useful to set Polymer.rootPath to provide a stable application mount path when using client side routing.
一个实例化的属性,值被设置为Polymer.rootPath。代表着主文档(main document)的URL。
Relative URLs in styles are automatically re-written to be relative to the importPath property. Any URLs outside of a
<style>
element should be bound using importPath or rootPath where appropriate.
所有style标签里面的URL全部被重写为相对于importPath的路径。除此之外,都需要自己手动添加合适的前缀:
Polymer builds a static map of node IDs when the element initializes its DOM template, to provide convenient access to frequently used nodes without the need to query for them manually. Any node specified in the element's template with an id is stored on the this.$ hash by id. The this.$ hash is created when the shadow DOM is initialized. In the ready callback, you must call super.ready() before accessing this.$.
这个主要是Polymer提供的一个可以快速访问DOM节点的方式。可以通过this.$[id]
来获取拥有对应id的元素/自定义元素。
相当于document.getElementById
的升级版类似于react中的this.refs
this.$
接口只能在ready回调函数的super.ready()
之后被调用。
动态创建的节点(dom-repeat
\ dom-if
)并不包含在this.$
集合里,但是还是可以用标准的querySelector
方法获取。