嵌套聚合物成分含量问题 [英] Nested Polymer Components Content Issue
问题描述
foo.html:
<link rel="import" href="bar.html">
<dom-module id="p-foo">
<template>
<p-bar>
<content select=".myContent"></content>
</p-bar>
</template>
<script>
Polymer( {
is: 'p-foo',
} )
</script>
</dom-module>
bar.html:
<dom-module id="p-bar">
<template>
bar open
<content select=".myContent"></content>
bar closed
</template>
<script>
Polymer( {
is: 'p-bar',
} )
</script>
</dom-module>
demo.html:
demo.html:
<!DOCTYPE html>
<html>
<head>
...
<link rel="import" href="foo.html">
</head>
<body>
<p-foo><div class="myContent"><strong>hello</strong></div></p-foo>
</body>
</html>
预期输出:
bar open
hello
bar closed
我有时会得到什么:
bar open
bar closed
hello
我得到的错误不是100％可再现的.刷新页面的时间仅占百分比.看起来，内容越复杂，发生错误的可能性就越高.
The error I am getting is not 100% reproducible. It only happens a percentage of the time I refresh the page. It also appears that the more complicated the content is the higher chance of the error occurring.
似乎聚合物试图在bar组件完全呈现之前选择.myContent.
It seems that polymer tries to select .myContent before the bar component is has completely rendered.
推荐答案
-
您需要通过调用
Polymer()来注册新的自定义元素.
You need to register your new custom elements with a call to
Polymer().
此外，如注释中所述，您的自定义元素需要包含连字符.例如:<p-foo>和<p-bar>.
Also, as already stated in comments, your custom elements need to contain an hypen. For example: <p-foo>and <p-bar>.
foo.html:
<link rel="import" href="bar.html">
<dom-module id="p-foo">
<template>
<p-bar>
<content select=".myContent"></content>
</p-bar>
</template>
<script>
Polymer( {
is: 'p-foo',
} )
</script>
</dom-module>
bar.html:
<dom-module id="p-bar">
<template>
bar open
<content select=".myContent"></content>
bar closed
</template>
<script>
Polymer( {
is: 'p-bar',
} )
</script>
</dom-module>
demo.html:
demo.html:
<head>
...
<link rel="import" href="foo.html">
</head>
<body>
<p-foo><div class="myContent"><strong>hello</strong></div></p-foo>
</body>
</html>
这篇关于嵌套聚合物成分含量问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
