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>
演示.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% 可重现的。它只发生在我刷新页面的一定比例的时间中。看来内容越复杂，发生错误的可能性就越大。
polymer 似乎在 bar 组件完全渲染之前尝试选择 .myContent。
最佳答案
您需要通过调用
Polymer()来注册新的自定义元素。 .此外，正如注释中所述，您的自定义元素需要包含连字符。例如:
<p-foo>和<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>
演示.html:
<head>
...
<link rel="import" href="foo.html">
</head>
<body>
<p-foo><div class="myContent"><strong>hello</strong></div></p-foo>
</body>
</html>
关于javascript - 嵌套 polymer 组件内容问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39460592/