Question

我已经玩弄了一下Polymer 1.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>
  ...

然后只显示按钮，但不显示文本。我究竟做错了什么？我一直在查看文档，但我看不到任何明显的问题。 Chrome devtools也没有错误。

Answer 1

自定义元素必须有结束标记。

void元素是一个元素，其内容模型在任何情况下都不允许它拥有内容。 Void元素可以具有属性。

以下是HTML中的void元素的完整列表：


area，base，br，col，command，embed，hr，img，input，keygen，link，meta，param，source，track，wbr

这就是您在代码中获得意外结果的原因。

只显示使用Polymer的第一个本地DOM元素

1 个答案: