第一次用聚合物显示局部DOM元素
第一次用聚合物显示局部DOM元素
提问于 2015-11-03 22:15:44
我一直在玩Polymer1.0，我有一个基本的HTML文件：
<head>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
</script>
</head>
<body>
<dom-module id="photo-view">
<template>
<p>Photo <span>{{basePic}}</span> goes here with filters
[<span>{{filters}}</span>]</p>
</template>
<script>
var PhotoView = Polymer({
is: 'photo-view',
properties: {
basePic: String,
filters: { type: Array, value: function() { return []; } }
}
});
</script>
</dom-module>
<dom-module id="photo-open">
<template>
<button>Click me to open a photo!</button>
</template>
<script>
var PhotoOpen = Polymer({
is: 'photo-open',
properties: {
picture: { type: String, notify: true }
}
});
</script>
</dom-module>
<dom-module id="photo-editor">
<template>
<photo-view base-pic="{{picture}}"/>
<photo-open picture="{{picture}}"/>
</template>
<script>
var PhotoEditor = Polymer({
is: 'photo-editor',
properties: {
picture: { type: String, value: 'xyz.jpg' }
}
});
</script>
</dom-module>
<photo-editor/>
</body>现在，我希望这会显示单词Photo xyz.jpg goes here with filters []，后面的按钮是Click me to open a photo!。唯一的问题是，只有photo-editor中的第一个本地DOM元素显示！例如，现在，只有photo-view部分显示。如果我把photo-open放在photo-view上面，比如：
<dom-module id="photo-editor">
<template>
<!-- Swapped order here -->
<photo-open picture="{{picture}}"/>
<photo-view base-pic="{{picture}}"/>
</template>
<script>
...然后只显示按钮，而不显示文本。我做错了什么？我一直在看医生，我看不出任何明显的问题。中也没有错误。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-04 04:39:22
自定义元素必须有一个结束标记。
void元素是一个元素，其内容模型从来不允许它在任何情况下都有内容。Void元素可以具有属性。 以下是HTML中空元素的完整列表： 区域，基地，br，col，命令，嵌入，hr，img，输入，keygen，链接，元，param，源，跟踪，wbr
这就是为什么在代码中得到意想不到的结果的原因。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33510122
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号