使用 Polymer 扩展原生 HTML 元素答案

【问题标题】：Extending native HTML Elements with Polymer使用 Polymer 扩展原生 HTML 元素
【发布时间】：2014-07-08 15:58:48
【问题描述】：

您好，我想使用 Polymer 扩展原生 HTML 元素，以创建自定义 Web 组件。当我不扩展时，我的聚合物就绪回调被调用。一旦我扩展，什么都不会被调用。虽然正在创建元素的影子 DOM...

这是我的使用代码：

<!DOCTYPE html>
<html>
    <head>
    <title>Custom Component Usage</title>
        <script src="bower_components/platform/platform.js"></script>
        <link rel="import" href="elements/extended-item.html">
    </head>
    <body>
        <extended-item>I was extended from div!</extended-item>
    </body>
</html>

自定义元素，扩展 div：

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="extended-item" extends="div">

    <template>

        <content></content>

    </template>

</polymer-element>

<script>
Polymer('extended-item',
        {
            created: function ()
            {
                console.log('EXTENDED ITEM IS CREATED!');
            },
            ready: function ()
            {
                console.log('EXTENDED ITEM IS READY!');
            },
            attached: function ()
            {
                console.log('EXTENDED ITEM IS ATTACHED!');
            },
            domReady: function ()
            {
                console.log('EXTENDED ITEMS DOM IS READY!');
            },
            detached: function ()
            {
                console.log('EXTENDED ITEM IS DETACHED!');
            },
            attributeChanged: function (attrName, oldVal, newVal)
            {
                //var newVal = this.getAttribute(attrName);
                console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
            }
        });
</script>

有什么想法吗？

提前致谢，抢

【问题讨论】：

标签： html dom polymer web-component

【解决方案1】：

如果使用 <div is="extended-item"> 而不是将元素称为 <extended-item>，则此方法可以正常工作。

这是一个示例 (jsbin)：

<polymer-element name="extended-item" extends="div">
  <template>
    <p>This is part of the template.</p>
    <content></content>
  </template>

  <script>
    Polymer('extended-item', {
      created: function() {
        console.log('EXTENDED ITEM IS CREATED!');
      },
      ready: function() {
        console.log('EXTENDED ITEM IS READY!');
      },
      attached: function() {
        console.log('EXTENDED ITEM IS ATTACHED!');
      },
      domReady: function() {
        console.log('EXTENDED ITEMS DOM IS READY!');
      },
      detached: function() {
        console.log('EXTENDED ITEM IS DETACHED!');
      },
      attributeChanged: function (attrName, oldVal, newVal)
      {
        //var newVal = this.getAttribute(attrName);
        console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
      }
    });
  </script>
</polymer-element>

<div is="extended-item">I was extended from div!</div>

编辑：正如本 cmets 中所指出的，这是预期的行为，记录在 Custom Elements spec 中。

【讨论】：

当你扩展一个原生 HTMLElement（除了 HTMLElement 本身）你必须使用 type-extension 语法<tag is="custom-name">。这是Custom Elements spec 的一部分。
谢谢！我想就是这样。 :) 我可以在第 5.4 点下看到它：w3.org/TR/components-intro