使用Polymer扩展本机HTML元素_html-js-css

概述您好我想从使用Polymer的本机 HTML元素扩展以创建自定义Web组件. 当我没有扩展时,我的聚合物就绪回调就被调用了.一旦我延伸,就不会再调用任何东西了.虽然正在创建元素的阴影DOM … 这是我的用法代码： <!DOCTYPE html><html> <head> <title>Custom Component Usage</title> <script s 您好我想从使用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>

任何的想法？

提前致谢,
抢

解决方法如果不是将元素称为< extended-item>,而是使用< div is =“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!');      },newVal)      {        //var newVal = this.getAttribute(attrname);        console.log(attrname,newVal);      }    });  </script></polymer-element><div is="extended-item">I was extended from div!</div>

编辑：正如本评论中所指出的,这是预期的行为,记录于@L_403_2@.

总结

以上是内存溢出为你收集整理的使用Polymer扩展本机HTML元素全部内容，希望文章能够帮你解决使用Polymer扩展本机HTML元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1082666.html