将Ace编辑器用作聚合物组件会导致不正确的行为

Question

我正在尝试让Ace Editor成为一个web组件，然而，它似乎表现得并不像它应该的那样。下面是正在发生的事情的截图。

Screenshot

我在控制台中没有收到错误消息。下面是我的代码：

<link rel="import" href="components/polymer/polymer.html">
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

<polymer-element name="ace-editor">
    <template>
        <pre id="editor">function foo(items) {
            var x = "All this is syntax highlighted";
            return x;
            }
        </pre>
    </template>
    <script>
        window.addEventListener('polymer-ready', function(e)
        {
            allgress.search_component_polymer.advanced_search.ace_editor();
        });
    </script>
</polymer-element>

代码称为on-polymer ready：

(defn ^:export ace-editor []
  (polymer :ace-editor
           {:attached (fn []
                        (this-as this
                                 (let [shadowRoot (.-shadowRoot this)
                                       editor-div (.getElementById shadowRoot "editor")
                                       editor (.edit js/ace editor-div)]
                                   (.setTheme editor "ace/theme/monokai")
                                   (.. editor getSession (setMode "ace/mode/javascript"))
                                   )))}))

聚合物函数的定义

(defn polymer
  [tag-name spec]
  (js/Polymer (name tag-name) (clj->js spec)))

问题不在于我创建组件的方式。该问题与ace-editor在用作组件时行为不正确有关。我已经使用同样的技术定义了大约10个其他组件，所有这些组件都很好。

Answer 1

发生这种情况的原因是，ace添加的样式对阴影根中的元素没有影响。有关PolymerLabs/ace-element上的相关错误，请参阅https://github.com/PolymerLabs/ace-element/pull/2