webcomponents

# Web Components

# 概述

各种网站往往需要一些相同的模块，比如日历、调色板等等，这种模块就被称为“组件”（component）。Web Components 就是浏览器原生的组件规范。

采用组件开发，有很多优点。

（1）有利于代码复用。组件是模块化编程思想的体现，可以跨平台、跨框架使用，构建、部署和与其他 UI 元素互动都有统一做法。

（2）使用非常容易。加载或卸载组件，只要添加或删除一行代码就可以了。

（3）开发和定制很方便。组件开发不需要使用框架，只要用原生的语法就可以了。开发好的组件往往留出接口，供使用者设置常见属性，比如上面代码的heading属性，就是用来设置对话框的标题。

（4）组件提供了 HTML、CSS、JavaScript 封装的方法，实现了与同一页面上其他代码的隔离。

未来的网站开发，可以像搭积木一样，把组件合在一起，就组成了一个网站。这种前景是非常诱人的。

Web Components 不是单一的规范，而是一系列的技术组成，以下是它的四个构成。

Custom Elements
Template
Shadow DOM
HTML Import

使用时，并不一定上面四种 API 都要用到。其中，Custom Element 和 Shadow DOM 比较重要，Template 和 HTML Import 只起到辅助作用。

# Custom Element

# 简介

HTML 标准定义的网页元素，有时并不符合我们的需要，这时浏览器允许用户自定义网页元素，这就叫做 Custom Element。简单说，它就是用户自定义的网页元素，是 Web components 技术的核心。

举例来说，你可以自定义一个叫做<my-element>的网页元素。

<my-element></my-element>

注意，自定义网页元素的标签名必须含有连字符-，一个或多个连字符都可以。这是因为浏览器内置的的 HTML 元素标签名，都不含有连字符，这样可以做到有效区分。

下面的代码先定义一个自定义元素的类。

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow( { mode: 'open' } );
    this.shadowRoot.innerHTML = `
      <style>
        /* scoped styles */
      </style>
      <slot></slot>
    `;
  }

  static get observedAttributes() {
    // Return list of attributes to watch.
  }

  attributeChangedCallback( name, oldValue, newValue ) {
    // Run functionality when one of these attributes is changed.
  }

  connectedCallback() {
    // Run functionality when an instance of this element is inserted into the DOM.
  }

  disconnectedCallback() {
    // Run functionality when an instance of this element is removed from the DOM.
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

上面代码有几个注意点。

自定义元素类的基类是HTMLElement。当然也可以根据需要，基于HTMLElement的子类，比如HTMLButtonElement。
构造函数内部定义了 Shadow DOM。所谓Shadow DOM指的是，这部分的 HTML 代码和样式，不直接暴露给用户。
类可以定义生命周期方法，比如connectedCallback()。

然后，window.customElements.define()方法，用来登记自定义元素与这个类之间的映射。

window.customElements.define('my-element', MyElement);

登记以后，页面上的每一个<my-element>元素都是一个MyElement类的实例。只要浏览器解析到<my-element>元素，就会运行MyElement的构造函数。

注意，如果没有登记就使用 Custom Element，浏览器会认为这是一个不认识的元素，会当做空的 div 元素处理。

window.customElements.define()方法定义了 Custom Element 以后，可以使用window.customeElements.get()方法获取该元素的构造方法。这使得除了直接插入 HTML 网页，Custom Element 也能使用脚本插入网页。

window.customElements.define(
  'my-element',
  class extends HTMLElement {...}
);
const el = window.customElements.get('my-element');
const myElement = new el();
document.body.appendChild(myElement);

1
2
3
4
5
6
7

如果你想扩展现有的 HTML 元素（比如<button>）也是可以的。

class GreetingElement extends HTMLButtonElement

登记的时候，需要提供扩展的元素。

customElements.define('hey-there', GreetingElement, { extends: 'button' });

使用的时候，为元素加上is属性就可以了。

<button is="hey-there" name="World">Howdy</button>

# 生命周期方法

Custom Element 提供一些生命周期方法。

class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    // here the element has been inserted into the DOM
  }
}

1
2
3
4
5
6
7
8
9

上面代码中，connectedCallback()方法就是MyElement元素的生命周期方法。每次，该元素插入 DOM，就会自动执行该方法。

connectedCallback()：插入 DOM 时调用。这可能不止一次发生，比如元素被移除后又重新添加。类的设置应该尽量放到这个方法里面执行，因为这时各种属性和子元素都可用。
disconnectedCallback()：移出 DOM 时执行。
attributeChangedCallback(attrName, oldVal, newVal)：添加、删除、更新或替换属性时调用。元素创建或升级时，也会调用。注意：只有加入observedAttributes的属性才会执行这个方法。
adoptedCallback()：自定义元素移动到新的 document 时调用，比如执行document.adoptNode(element)时。

下面是一个例子。

class GreetingElement extends HTMLElement {
  constructor() {
    super();
    this._name = 'Stranger';
  }
  connectedCallback() {
    this.addEventListener('click', e => alert(`Hello, ${this._name}!`));
  }
  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === 'name') {
      if (newValue) {
        this._name = newValue;
      } else {
        this._name = 'Stranger';
      }
    }
  }
}
GreetingElement.observedAttributes = ['name'];
customElements.define('hey-there', GreetingElement);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

上面代码中，GreetingElement.observedAttributes属性用来指定白名单里面的属性，上例是name属性。只要这个属性的值发生变化，就会自动调用attributeChangedCallback方法。

使用上面这个类的方法如下。

<hey-there>Greeting</hey-there>
<hey-there name="Potch">Personalized Greeting</hey-there>

1
2

attributeChangedCallback方法主要用于外部传入的属性，就像上面例子中name="Potch"。

生命周期方法调用的顺序如下：constructor -> attributeChangedCallback -> connectedCallback，即attributeChangedCallback早于connectedCallback执行。这是因为attributeChangedCallback相当于调整配置，应该在插入 DOM 之前完成。

下面的例子能够更明显地看出这一点，在插入 DOM 前修改 Custome Element 的颜色。

class MyElement extends HTMLElement {
  constructor() {
    this.container = this.shadowRoot.querySelector('#container');
  }
  attributeChangedCallback(attr, oldVal, newVal) {
    if(attr === 'disabled') {
      if(this.hasAttribute('disabled') {
        this.container.style.background = '#808080';
      } else {
        this.container.style.background = '#ffffff';
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 自定义属性和方法

Custom Element 允许自定义属性或方法。

class MyElement extends HTMLElement {
  ...

  doSomething() {
    // do something in this method
  }
}

1
2
3
4
5
6
7

上面代码中，doSomething()就是MyElement的自定义方法，使用方法如下。

const element = document.querySelector('my-element');
element.doSomething();

1
2

自定义属性可以使用 JavaScript class 的所有语法，因此也可以设置取值器和赋值器。

class MyElement extends HTMLElement {
  ...

  set disabled(isDisabled) {
    if(isDisabled) {
      this.setAttribute('disabled', '');
    }
    else {
      this.removeAttribute('disabled');
    }
  }

  get disabled() {
    return this.hasAttribute('disabled');
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面代码中的取值器和赋值器，可用于<my-input name="name" disabled>这样的用法。

# window.customElements.whenDefined()

window.customElements.whenDefined()方法在一个 Custom Element 被customElements.define()方法定义以后执行，用于“升级”一个元素。

window.customElements.whenDefined('my-element')
.then(() => {
  // my-element is now defined
})

1
2
3
4

如果某个属性值发生变化时，需要做出反应，可以将它放入observedAttributes数组。

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['disabled'];
  }

  constructor() {
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
        .disabled {
          opacity: 0.4;
        }
      </style>

      <div id="container"></div>
    `;

    this.container = this.shadowRoot('#container');
  }

  attributeChangedCallback(attr, oldVal, newVal) {
    if(attr === 'disabled') {
      if(this.disabled) {
        this.container.classList.add('disabled');
      }
      else {
        this.container.classList.remove('disabled')
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 回调函数

自定义元素的原型有一些属性，用来指定回调函数，在特定事件发生时触发。

createdCallback：实例生成时触发
attachedCallback：实例插入HTML文档时触发
detachedCallback：实例从HTML文档移除时触发
attributeChangedCallback(attrName, oldVal, newVal)：实例的属性发生改变时（添加、移除、更新）触发

下面是一个例子。

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {
  console.log('created');
  this.innerHTML = 'This is a my-demo element!';
};

proto.attachedCallback = function() {
  console.log('attached');
};

var XFoo = document.registerElement('x-foo', {prototype: proto});

1
2
3
4
5
6
7
8
9
10
11
12

利用回调函数，可以方便地在自定义元素中插入HTML语句。


var XFooProto = Object.create(HTMLElement.prototype);

XFooProto.createdCallback = function() {
  this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
};

var XFoo = document.registerElement('x-foo-with-markup',
  {prototype: XFooProto});

1
2
3
4
5
6
7
8
9
10

上面代码定义了createdCallback回调函数，生成实例时，该函数运行，插入如下的HTML语句。

<x-foo-with-markup>
   <b>I'm an x-foo-with-markup!</b>
</x-foo-with-markup>

1
2
3

# Custom Element 的子元素

用户使用 Custom Element 时候，可以在内部放置子元素。Custom Element 提供<slot>用来引用内部内容。

下面的<image-gallery>是一个 Custom Element。用户在里面放置了子元素。

<image-gallery>
  <img src="foo.jpg" slot="image">
  <img src="bar.jpg" slot="image">
</image-gallery>

1
2
3
4

<image-gallery>内部的模板如下。

<div id="container">
  <div class="images">
    <slot name="image"></slot>
  </div>
</div>

1
2
3
4
5

最终合成的代码如下。

<div id="container">
  <div class="images">
    <slot name="image">
      <img src="foo.jpg" slot="image">
      <img src="bar.jpg" slot="image">
    </slot>
  </div>
</div>

1
2
3
4
5
6
7
8

# `<template>`标签

# 基本用法

<template>标签表示组件的 HTML 代码模板。

<template>
  <h1>This won't display!</h1>
  <script>alert("this won't alert!");</script>
</template>

1
2
3
4

<template>内部就是正常的 HTML 代码，浏览器不会将这些代码加入 DOM。

下面的代码会将模板内部的代码插入 DOM。

let template = document.querySelector('template');
document.body.appendChild(template.content);

1
2

注意，模板内部的代码只能插入一次，如果第二次执行上面的代码就会报错。

如果需要多次插入模板，可以复制<template>内部代码，然后再插入。

document.body.appendChild(template.content.cloneNode(true));

上面代码中，cloneNode()方法的参数true表示复制包含所有子节点。

接受<template>插入的元素，叫做宿主元素（host）。在<template>之中，可以对宿主元素设置样式。

<template>
<style>
  :host {
    background: #f8f8f8;
  }
  :host(:hover) {
    background: #ccc;
  }
</style>
</template>

1
2
3
4
5
6
7
8
9
10

# document.importNode()

document.importNode方法用于克隆外部文档的DOM节点。

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

1
2
3
4

上面例子是将iframe窗口之中的节点oldNode，克隆进入当前文档。

注意，克隆节点之后，还必须用appendChild方法将其加入当前文档，否则不会显示。换个角度说，这意味着插入外部文档节点之前，必须用document.importNode方法先将这个节点准备好。

document.importNode方法接受两个参数，第一个参数是外部文档的DOM节点，第二个参数是一个布尔值，表示是否连同子节点一起克隆，默认为false。大多数情况下，必须显式地将第二个参数设为true。

# Shadow DOM

所谓 Shadow DOM 指的是，浏览器将模板、样式表、属性、JavaScript 码等，封装成一个独立的 DOM 元素。外部的设置无法影响到其内部，而内部的设置也不会影响到外部，与浏览器处理原生网页元素（比如<video>元素）的方式很像。

Shadow DOM 最大的好处有两个，一是可以向用户隐藏细节，直接提供组件，二是可以封装内部样式表，不会影响到外部。

Custom Element 内部有一个 Shadow Root。它就是接入外部 DOM 的根元素。

// attachShadow() creates a shadow root.
let shadow = div.attachShadow({ mode: 'open' });
let inner = document.createElement('b');
inner.appendChild(document.createTextNode('Hiding in the shadows'));

// shadow root supports the normal appendChild method.
shadow.appendChild(inner);
div.querySelector('b'); // empty

1
2
3
4
5
6
7
8

上面代码中，<div>包含<b>，但是 DOM 方法无法看到它，而且页面的样式也影响不到它。

mode: 'open'表示开发者工具里面，可以看到 Custom HTML 内部的 DOM，并与之互动。mode: closed将不允许 Custom Element 的使用者与内部代码互动。

Shadow root 内部通过指定innerHTML属性或使用<template>元素，指定 HTML 代码。

Shadow DOM 内部可以通过向根添加<style>（或<link>）来设置样式。

let style = document.createElement('style');
style.innerText = 'b { font-weight: bolder; color: red; }';
shadowRoot.appendChild(style);

let inner = document.createElement('b');
inner.innerHTML = "I'm bolder in the shadows";
shadowRoot.appendChild(inner);

1
2
3
4
5
6
7

上面代码添加的样式，只会影响 Shadow DOM 内的元素。

Custom Element 的 CSS 样式内部，:root表示这个根元素。比如，Custom Element 默认是行内元素，下面代码可以改成块级元素。

:host {
  display: block;
}

:host([disabled]) {
  opacity: 0.5;
}

1
2
3
4
5
6
7

注意，外部样式会覆盖掉:host的设置，比如下面的样式会覆盖:host。

my-element {
  display: inline-block;
}

1
2
3

利用 CSS 的自定义属性，可以为 Custom Element 可以被覆盖的默认样式。下面是外部样式，my-element是 Custom Element。

my-element {
  --background-color: #ff0000;
}

1
2
3

然后，内部可以指定默认样式，用于用户没有指定颜色的情况。

:host {
  --background-color: #ffffff;
}

#container {
  background-color: var(--background-color);
}

1
2
3
4
5
6
7

下面的例子是为 Shadow DOM 加上独立的模板。

<div id="nameTag">张三</div>

<template id="nameTagTemplate">
  <style>
    .outer {
      border: 2px solid brown;
    }
  </style>

  <div class="outer">
    <div class="boilerplate">
      Hi! My name is
    </div>
    <div class="name">
      Bob
    </div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面代码是一个div元素和模板。接下来，就是要把模板应用到div元素上。

# HTML Import

# 基本操作

长久以来，网页可以加载外部的样式表、脚本、图片、多媒体，却无法方便地加载其他网页，iframe和ajax都只能提供部分的解决方案，且有很大的局限。HTML Import就是为了解决加载外部网页这个问题，而提出来的。

下面代码用于测试当前浏览器是否支持HTML Import。


function supportsImports() {
  return 'import' in document.createElement('link');
}

if (supportsImports()) {
  // 支持
} else {
  // 不支持
}

1
2
3
4
5
6
7
8
9
10
11

HTML Import用于将外部的HTML文档加载进当前文档。我们可以将组件的HTML、CSS、JavaScript封装在一个文件里，然后使用下面的代码插入需要使用该组件的网页。


<link rel="import" href="dialog.html">

1
2
3

上面代码在网页中插入一个对话框组件，该组建封装在dialog.html文件。注意，dialog.html文件中的样式和JavaScript脚本，都对所插入的整个网页有效。

假定A网页通过HTML Import加载了B网页，即B是一个组件，那么B网页的样式表和脚本，对A网页也有效（准确得说，只有style标签中的样式对A网页有效，link标签加载的样式表对A网页无效）。所以可以把多个样式表和脚本，都放在B网页中，都从那里加载。这对大型的框架，是很方便的加载方法。

如果B与A不在同一个域，那么A所在的域必须打开CORS。


<!-- example.com必须打开CORS -->
<link rel="import" href="http://example.com/elements.html">

1
2
3
4

除了用link标签，也可以用JavaScript调用link元素，完成HTML Import。


var link = document.createElement('link');
link.rel = 'import';
link.href = 'file.html'
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

1
2
3
4
5
6
7
8

HTML Import加载成功时，会在link元素上触发load事件，加载失败时（比如404错误）会触发error事件，可以对这两个事件指定回调函数。


<script async>
  function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
  }
  function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
  }
</script>

<link rel="import" href="file.html"
      onload="handleLoad(event)" onerror="handleError(event)">

1
2
3
4
5
6
7
8
9
10
11
12
13

上面代码中，handleLoad和handleError函数的定义，必须在link元素的前面。因为浏览器元素遇到link元素时，立刻解析并加载外部网页（同步操作），如果这时没有对这两个函数定义，就会报错。

HTML Import是同步加载，会阻塞当前网页的渲染，这主要是为了样式表的考虑，因为外部网页的样式表对当前网页也有效。如果想避免这一点，可以为link元素加上async属性。当然，这也意味着，如果外部网页定义了组件，就不能立即使用了，必须等HTML Import完成，才能使用。


<link rel="import" href="/path/to/import_that_takes_5secs.html" async>

1
2
3

但是，HTML Import不会阻塞当前网页的解析和脚本执行（即阻塞渲染）。这意味着在加载的同时，主页面的脚本会继续执行。

最后，HTML Import支持多重加载，即被加载的网页同时又加载其他网页。如果这些网页都重复加载同一个外部脚本，浏览器只会抓取并执行一次该脚本。比如，A网页加载了B网页，它们各自都需要加载jQuery，浏览器只会加载一次jQuery。

# 脚本的执行

外部网页的内容，并不会自动显示在当前网页中，它只是储存在浏览器中，等到被调用的时候才加载进入当前网页。为了加载网页网页，必须用DOM操作获取加载的内容。具体来说，就是使用link元素的import属性，来获取加载的内容。这一点与iframe完全不同。


var content = document.querySelector('link[rel="import"]').import;

1
2
3

发生以下情况时，link.import属性为null。

浏览器不支持HTML Import
link元素没有声明rel="import"
link元素没有被加入DOM
link元素已经从DOM中移除
对方域名没有打开CORS

下面代码用于从加载的外部网页选取id为template的元素，然后将其克隆后加入当前网页的DOM。


var el = linkElement.import.querySelector('#template');

document.body.appendChild(el.cloneNode(true));

1
2
3
4
5

当前网页可以获取外部网页，反过来也一样，外部网页中的脚本，不仅可以获取本身的DOM，还可以获取link元素所在的当前网页的DOM。


// 以下代码位于被加载（import）的外部网页

// importDoc指向被加载的DOM
var importDoc = document.currentScript.ownerDocument;

// mainDoc指向主文档的DOM
var mainDoc = document;

// 将子页面的样式表添加主文档
var styles = importDoc.querySelector('link[rel="stylesheet"]');
mainDoc.head.appendChild(styles.cloneNode(true));

1
2
3
4
5
6
7
8
9
10
11
12
13

上面代码将所加载的外部网页的样式表，添加进当前网页。

被加载的外部网页的脚本是直接在当前网页的上下文执行，因为它的window.document指的是当前网页的document，而且它定义的函数可以被当前网页的脚本直接引用。

# Web Component的封装

对于Web Component来说，HTML Import的一个重要应用是在所加载的网页中，自动登记Custom Element。


<script>
  // 定义并登记<say-hi>
  var proto = Object.create(HTMLElement.prototype);

  proto.createdCallback = function() {
    this.innerHTML = 'Hello, <b>' +
                     (this.getAttribute('name') || '?') + '</b>';
  };

  document.registerElement('say-hi', {prototype: proto});
</script>

<template id="t">
  <style>
    ::content > * {
      color: red;
    }
  </style>
  <span>I'm a shadow-element using Shadow DOM!</span>
  <content></content>
</template>

<script>
  (function() {
    var importDoc = document.currentScript.ownerDocument; //指向被加载的网页

    // 定义并登记<shadow-element>
    var proto2 = Object.create(HTMLElement.prototype);

    proto2.createdCallback = function() {
      var template = importDoc.querySelector('#t');
      var clone = document.importNode(template.content, true);
      var root = this.createShadowRoot();
      root.appendChild(clone);
    };

    document.registerElement('shadow-element', {prototype: proto2});
  })();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

上面代码定义并登记了两个元素：<say-hi>和<shadow-element>。在主页面使用这两个元素，非常简单。


<head>
  <link rel="import" href="elements.html">
</head>
<body>
  <say-hi name="Eric"></say-hi>
  <shadow-element>
    <div>( I'm in the light dom )</div>
  </shadow-element>
</body>

1
2
3
4
5
6
7
8
9
10
11

不难想到，这意味着HTML Import使得Web Component变得可分享了，其他人只要拷贝elements.html，就可以在自己的页面中使用了。

# Polymer.js

Web Components是非常新的技术，为了让老式浏览器也能使用，Google推出了一个函数库Polymer.js (opens new window)。这个库不仅可以帮助开发者，定义自己的网页元素，还提供许多预先制作好的组件，可以直接使用。

# 直接使用的组件

Polymer.js提供的组件，可以直接插入网页，比如下面的google-map。。


<script src="components/platform/platform.js"></script>
<link rel="import" href="google-map.html">
<google-map lat="37.790" long="-122.390"></google-map>

1
2
3
4
5

再比如，在网页中插入一个时钟，可以直接使用下面的标签。


<polymer-ui-clock></polymer-ui-clock>

1
2
3

自定义标签与其他标签的用法完全相同，也可以使用CSS指定它的样式。


polymer-ui-clock {
  width: 320px;
  height: 320px;
  display: inline-block;
  background: url("../assets/glass.png") no-repeat;
  background-size: cover;
  border: 4px solid rgba(32, 32, 32, 0.3);
}

1
2
3
4
5
6
7
8
9
10

# 安装

如果使用bower安装，至少需要安装platform和core components这两个核心部分。


bower install --save Polymer/platform
bower install --save Polymer/polymer

1
2
3
4

你还可以安装所有预先定义的界面组件。


bower install Polymer/core-elements
bower install Polymer/polymer-ui-elements

1
2
3
4

还可以只安装单个组件。


bower install Polymer/polymer-ui-accordion

1
2
3

这时，组件根目录下的bower.json，会指明该组件的依赖的模块，这些模块会被自动安装。


{
  "name": "polymer-ui-accordion",
  "private": true,
  "dependencies": {
    "polymer": "Polymer/polymer#0.2.0",
    "polymer-selector": "Polymer/polymer-selector#0.2.0",
    "polymer-ui-collapsible": "Polymer/polymer-ui-collapsible#0.2.0"
  },
  "version": "0.2.0"
}

1
2
3
4
5
6
7
8
9
10
11
12

# 自定义组件

下面是一个最简单的自定义组件的例子。


<link rel="import" href="../bower_components/polymer/polymer.html">
 
<polymer-element name="lorem-element">
  <template>
    <p>Lorem ipsum</p>
  </template>
</polymer-element>

1
2
3
4
5
6
7
8
9

上面代码定义了lorem-element组件。它分成三个部分。

（1）import命令

import命令表示载入核心模块

（2）polymer-element标签

polymer-element标签定义了组件的名称（注意，组件名称中必须包含连字符）。它还可以使用extends属性，表示组件基于某种网页元素。


<polymer-element name="w3c-disclosure" extends="button">

1
2
3

（3）template标签

template标签定义了网页元素的模板。

# 组件的使用方法

在调用组件的网页中，首先加载polymer.js库和组件文件。


<script src="components/platform/platform.js"></script>
<link rel="import" href="w3c-disclosure.html">

1
2
3
4

然后，分成两种情况。如果组件不基于任何现有的HTML网页元素（即定义的时候没有使用extends属性），则可以直接使用组件。


<lorem-element></lorem-element>

1
2
3

这时网页上就会显示一行字“Lorem ipsum”。

如果组件是基于（extends）现有的网页元素，则必须在该种元素上使用is属性指定组件。


<button is="w3c-disclosure">Expand section 1</button>

1
2
3

# 参考链接

The Power of Web Components (opens new window), Potch
Todd Motto, Web Components and concepts, ShadowDOM, imports, templates, custom elements (opens new window)
Dominic Cooney, Shadow DOM 101 (opens new window)
Eric Bidelman, HTML's New Template Tag (opens new window)
Rey Bango, Using Polymer to Create Web Components (opens new window)
Cédric Trévisan, Building an Accessible Disclosure Button – using Web Components](http://blog.paciellogroup.com/2014/06/accessible-disclosure-button-using-web-components/)
Eric Bidelman, Custom Elements: defining new elements in HTML (opens new window)
Eric Bidelman, HTML Imports (opens new window)
TJ VanToll, Why Web Components Are Ready For Production (opens new window)
Chris Bateman, A No-Nonsense Guide to Web Components, Part 1: The Specs (opens new window)
Web Components will replace your frontend framework (opens new window), Danny Moerkerke
Custom Elements v1: Reusable Web Components (opens new window), Eric Bidelman

编辑

上次更新: 2024/9/6 12:14:45

← webaudio websocket→

webcomponents

# Web Components

# 概述

# Custom Element

# 简介

# 生命周期方法

# 自定义属性和方法

# window.customElements.whenDefined()

# 回调函数

# Custom Element 的子元素

# <template>标签

# 基本用法

# document.importNode()

# Shadow DOM

# HTML Import

# 基本操作

# 脚本的执行

# Web Component的封装

# Polymer.js

# 直接使用的组件

# 安装

# 自定义组件

# 组件的使用方法

# 参考链接

# `<template>`标签