使用聚合物扩展本机HTML元素 [英] Extending native HTML Elements with Polymer
本文介绍了使用聚合物扩展本机HTML元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的聚合物就绪回调正在被调用，当我不扩展。一旦我延伸，没有什么被称为了。虽然正在创建元素的阴影DOM ...
这是我的代码用于使用：
<！DOCTYPE html>
< html>
< head>
< title>自定义组件使用< / title>
< script src =bower_components / platform / platform.js>< / script>
< link rel =importhref =elements / extended-item.html>
< / head>
< body>
< extended-item>我从div扩展了< / extended-item>
< / body>
< / html>
自定义元素，其扩展 div ：
< link rel =importhref =../ bower_components / polymer / polymer.html>
< polymer-element name =extended-itemextends =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 'b
$ b {
console.log（'EXTENDED ITEM IS DETACHED！'）;
}，
attributeChanged：function（attrName，oldVal，newVal）
{
// var newVal = this.getAttribute（attrName）;
console.log（attrName，'old ：'+ oldVal'，new： '，newVal）;
}
}）;
< / script>
任何想法？
提前感谢，
Rob
解决方案
如果不是将元素称为< ;扩展项目> ，而是使用< div is =extended-item> 。
这是一个例子（ jsbin ）：
< polymer-element name =extended-itemextends =div>
< template>
< p>这是模板的一部分。< / p>
< content>< / content>
< / template>
< script>
Polymer（'extended-item'，{
created：function（）{
console.log（'EXTENDED ITEM IS CREATED！'）;
}，
准备：function（）{
console.log（'EXTENDED ITEM is READY！'）;
}，
attached：function（）{
console.log（'EXTENDED ITEM已被附加！'）;
}，
domReady：function（）{
console.log（'EXTENDED ITEMS DOM is READY！'）;
}，
分离：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>我从div扩展了< / div>
编辑：正如这篇评论所指出的，这是预期的行为，记录在自定义元素规格中。
Hi i'd like to extend from a native HTML Element with Polymer for creating a custom web component. My polymer ready-callback is getting called, when i'm not extending. As soon as i extend, nothing gets called anymore. Though the shadow DOM for the element is being created...
Here is my code for the usage:
<!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>
Custom Element, which extends 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>
Any idea?
thanks in advance, Rob
解决方案
This works properly if, instead of referring to the element as <extended-item>, you instead use <div is="extended-item">.
Here's an example (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>
EDIT: As pointed out in this comments, this is expected behavior, documented in the Custom Elements spec.
这篇关于使用聚合物扩展本机HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
