为什么 Polymer 不插入内容？

Question

我想了解 Web 组件，所以我想创建一个 Web 组件，它将 "wrap" 一个 select 标记放入 select2.

这是我的主要内容 HTML:

<html>
  <head>
    <title>Web components</title>
    <meta charset="utf-8"></meta>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="elements/select2-select.html"></link>
  </head>
  <body>
    <div>
      <select2-select>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select2-select>
    </div>
  </body>
</html>

还有我的自定义元素：

<link rel="import" href="../bower_components/polymer/polymer.html"></link>

<polymer-element name="select2-select">
  <template>
    <select id="main">
      <content></content>
    </select>
  </template>
  <script>Polymer({});</script>
</polymer-element>

问题是，option 标签没有插入影子 DOM:

我做错了什么？我是运行 Firefox on Ubuntu 14.04.2，如果它无论如何相关的话。

非常感谢。

Answer 1

我首先想到的是 JQuery 和 Select2 元素无法访问，因为您已将它们添加到全局范围。根据 The Golden Standard Expressed Dependencies 部分，Web Components 应该负责它们自己的依赖关系。

另一件要注意的事情是，一些 HTML 元素只会在其他特定元素内呈现。例如 - 如果我将 option 标签添加到 div，它们将不会呈现，除非它们被包裹在 select 标签中。

Answer 2

是的，最简单的解决方法是使用属性。我已经修改了您的原始脚本以使其正常工作。

主要html:

<html>
  <head>
    <title>Web components</title>
    <meta charset="utf-8"></meta>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="elements/select2-select.html"></link>
  </head>
  <body>
    <div>
      <select2-select options='[
      {"value":"1","text":"1"},
      {"value":"2","text":"2"},
      {"value":"3","text":"3"},
      {"value":"4","text":"4"}
      ]'></select2-select>
    </div>
  </body>
</html>

自定义元素：

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="select2-select" attributes="options">
  <template>
    <select id="main">
        <template repeat="{{option in options}}">
        <option value={{option.value}}>{{option.text}}</option>
        </template>
    </select>
  </template>
  <script>
    Polymer('select2-select', {
        publish: {
            options: {},
        }
    });
  </script>
</polymer-element>

为什么 Polymer 不插入内容？

Why doesn't Polymer insert the content?

html

javascript

web-component

polymer