Only first local DOM element showing with Polymer

问题

I've been toying with Polymer 1.0 a bit and have this basic HTML file:

<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>

Now, I'd expect this to show the words Photo xyz.jpg goes here with filters [], followed by the button that says Click me to open a photo!. Only issue is, only the first local DOM element in photo-editor shows! For instance, right now, only the photo-view part shows. If I put the photo-open above photo-view like:

<dom-module id="photo-editor">
  <template>
    <!-- Swapped order here -->
    <photo-open picture="{{picture}}"/>
    <photo-view base-pic="{{picture}}"/>
  </template>

  <script>
  ...

then only the button shows, but not the text. What am I doing wrong? I've been looking over the docs, and I can't see any obvious issues. There are no errors in the Chrome devtools, either.

回答1:

Custom elements must have a closing tag.

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

The following is a complete list of the void elements in HTML:

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

This is the reason why you are getting unexpected results in your code.

来源：https://stackoverflow.com/questions/33510122/only-first-local-dom-element-showing-with-polymer

标签

html

polymer

polymer-1.0