首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

HTML5 组件 实现标准组件（2）模板、定制元素和 HTML 导入

论坛元老

Rank: 8Rank: 8

UID
1066743 
1#
打印
tT
look_w发表于 2018-10-19 19:25 | 只看该作者

HTML5 组件 实现标准组件（2）模板、定制元素和 HTML 导入

模板、定制元素和 HTML 导入现在，您已经看到了 Shadow DOM 正在运行，我将它和其他主要 HTML5 Web 组件（模板、定制元素和 HTML 导入）投入实际使用。
图 6 显示了 HTML5 Denver Meetup 组中的一个简单的无序 meetup 列表：
图 6. 一个无序的 meetup 列表创建  中的无序列表的标记如清单 2 所示：
清单 2.  meetup 无序列表的 HTML
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
42
43
44
<!DOCTYPE html>
<html>
<head>
   <title>Meetups Component</title>
   
</head>
<body>

  <ul>
    <li class="mobile">Sencha Touch.
       <span class='date'>Jan 23</span></li>

    <li class="html5-in-general">HTML5 & Semantic Markup.
       <span class='date'>Jun 18</span></li>

    <li class="html5-in-general">HTML5 & Windows 8.
       <span class='date'>Jul 23</span></li>

    <li class="javascript">HTML5 JavaScript on Crack.
       <span class='date'>Aug 20</span></li>

    <li class="javascript">CoffeeScript for Recovering JavaScript Programmers.
       <span class='date'>Sept 17</span></li>

    <li class="html5-in-general">ClojureScript and CouchDB.
       <span class='date'>May 21</span></li>

    <li class="html5-in-general">Polyfills for the Pragmatist.
       <span class='date'>Apr 23</span></li>

    <li class="design">CSS3 for Programmers.
       <span class='date'>Feb 20</span></li>

    <li class="lightning">Quick-start web apps;
    Graphics; Data visualization; Adaptive patterns; JSON.
       <span class='date'>Oct 22</span></li>

    <li class="lightning">Web workers; CSS3; HTTP; Audio, video, & canvas;
    Charting; JS evolution.
       <span class='date'>March 19</span></li>
  </ul>

</body>
</html>




的 HTML 非常普通，只创建了一个有列表项的无序列表。图 7 显示了相同的列表项，但并不是在无序列表中，这些列表项位于一个定制组件中，而且由该组件操作：
图 7. 一个定制 meetup 列表组件清单 3 显示了  所示的应用程序的标记：
清单 3. 一个 meetup-talks 组件，而不是无序列表
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
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
   <title>Meetups Component</title>
   <script src="../polymer/polymer.js"></script>
   <link rel="components" href="meetup-component.html">

</head>
<body>

  <meetup-talks>
    <li class="mobile">Sencha Touch.
       <span class='date'>Jan 23</span></li>

    <li class="html5-in-general">HTML5 & Semantic Markup.
       <span class='date'>Jun 18</span></li>

    <li class="html5-in-general">HTML5 & Windows 8.
       <span class='date'>Jul 23</span></li>

    <li class="javascript">HTML5 JavaScript on Crack.
       <span class='date'>Aug 20</span></li>

    <li class="javascript">CoffeeScript for Recovering JavaScript Programmers.
       <span class='date'>Sept 17</span></li>

    <li class="html5-in-general">ClojureScript and CouchDB.
       <span class='date'>May 21</span></li>

    <li class="html5-in-general">Polyfills for the Pragmatist.
       <span class='date'>Apr 23</span></li>

    <li class="design">CSS3 for Programmers.
       <span class='date'>Feb 20</span></li>

    <li class="lightning">Quick-start web apps;
    Graphics; Data visualization; Adaptive patterns; JSON.
       <span class='date'>Oct 22</span></li>

    <li class="lightning">Web workers; CSS3; HTTP; Audio, video, & canvas;
    Charting; JS evolution.
       <span class='date'>March 19</span></li>
  </meetup-talks>

</body>
</html>




请注意， 和  的标记几乎完全相同，它们有三个差异：
  • 中的标记包含一个名为 polymer.js  的文件。该文件是 Polymer 开源项目中附带的，该项目提供了 HTML 5 Web Component API（Shadow DOM、模板，等等）的实现。Polymer 项目（我将在接下来的  小节对其进行详细讨论）是由 Chrome 开发团队实现的。
  • 使用了一个 link元素来导入其他 HTML5 文件。link元素的使用被称为 HTML 导入。在撰写本文之时，HTML 导入还无法在任何浏览器中实现；在本例中，该功能来自 Polymer 项目。
  • 中的无序列表元素可使用  中的 meetup-talks定制元素替换。
meetup-talks定制元素是在 meetup-component.html 中实现的，如清单 4 所示：
清单 4. meetup-list元素
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
<element name="meetup-list">
  <template>
    <style>
      /* styles that follow only apply to the ShadowDOM of the <meetup-list> element */

      #meetups {
        display: block;
        padding: 15px;
        padding-top: 0px;
        background: lightgray;
        border: thin solid cornflowerblue;
      }

      .title {
        color: blue;
        font-size: 1.5em;
      }
    </style>

    <div id='meetups'>
      <p class='title'>HTML5 in General</p>
      <content select='.html5-in-general'></content>
     
      <p class='title'>JavaScript</p>
      <content select='.javascript'></content>
     
      <p class='title'>Design</p>
      <content select='.design'></content>
     
      <p class='title'>Lightning</p>
      <content select='.lightning'></content>
    </div>
  </template>

  <script>
    Polymer.register(this);
  </script>
</element>




让一切变得很有趣。首先，我声明了一个名为 meetup-list的新元素，请注意，根据 HTML 规范，需要在名称中包含一个连字符。在清单结尾处，有一行 JavaScript 代码向 Polymer全局对象注册了 meetup-list元素。小心地声明和注册定制元素，以便可以在 HTML 页面中使用它们。
我在 element元素内部声明了一个  template。模板以声明方式而不是以编程方式定义了 Shadow DOM。因此，在  中，我创建了一个 Shadow DOM 模板。每当有人在 HTML 页面中使用 meetup-list元素时，浏览器就会使用此 Shadow DOM  模板为有问题的元素创建一个新的 Shadow DOM 实例。
在该模板中，我定义了两个 只应用于该模板中的元素的 CSS 样式。您可能还记得，因为一个模板代表一个 Shadow DOM，所以周围文档中定义的 CSS 样式反而 不会影响该模板中的元素。例如，如果您要将段落元素的样式添加到  中的 HTML 中，该样式不会影响模板中的段落。
除了 CSS 样式之外，该模板也在后续 Shadow DOM 实例中定义了一些元素。content元素使用一个 CSS 选择器从 meetup-list的 原始内容中选择列表项。因此，除了以声明方式指定 Shadow DOM 实例之外，该模板还可以 有选择地将元素的原始内容插入模板中。请注意，您可以使用 <content></content>将一个元素的所有原始内容插入其模板中。
收藏 分享 评分
回复 引用

订阅 TOP

返回列表