Question

我试图理解Web组件，所以我想创建一个Web组件，以便＆＃34;包装＆＃34; select2.

中的select标记

这是我的主要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中：

dom-example

我做错了什么？我在Ubuntu 14.04.2上运行Firefox，如果它无论如何相关。

非常感谢。

Answer 1

是的，发生这种情况最简单的方法是使用属性。我已经修改了原始脚本以使其正常工作。

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

Answer 2

我能想到的第一件事是JQuery＆amp;元素无法访问Select2，因为您已将它们添加到全局范围。根据{{3}}表达的依赖关系部分，Web组件应该负责自己的依赖关系。

另一个需要注意的是，某些HTML元素只会在其他特定元素中呈现。例如 - 如果我向option添加div代码，除非它们包含在select代码中，否则它们不会呈现。

为什么聚合物不插入内容？

2 个答案: