javascript - 无法读取 Polymer 2.0 中 addeventlistener 的属性

Question

当组件在 dom 中准备就绪时，webcomponent-loader.js 无法调度事件。 document.dispatchEvent(new CustomEvent('WebComponentsReady', {bubbles: true})); 我正在尝试创建 wysiwyg-e 组件，但当 dom 准备就绪时，它不会让组件加载。由于 addEventListner，它停止为整个 polymer 应用程序提供服务。

错误::未捕获类型错误:无法读取 null 的属性“addEventListener”

<dom-module id="custom-keybar">
     <template>
     <wysiwyg-e style="width: 100vw; height: 100vh;" id="wysiwygE">
        <wysiwyg-tool-bold></wysiwyg-tool-bold>
        <wysiwyg-tool-italic></wysiwyg-tool-italic>
        <wysiwyg-tool-underline></wysiwyg-tool-underline>
        <wysiwyg-tool-strike></wysiwyg-tool-strike>
        <wysiwyg-tool-color></wysiwyg-tool-color>
        <wysiwyg-tool-clear></wysiwyg-tool-clear>
        <wysiwyg-tool-code></wysiwyg-tool-code>
        <wysiwyg-tool-link></wysiwyg-tool-link>
        <wysiwyg-tool-image></wysiwyg-tool-image>
        <wysiwyg-tool-audio></wysiwyg-tool-audio>
        <wysiwyg-tool-video></wysiwyg-tool-video>
        <wysiwyg-tool-ordered></wysiwyg-tool-ordered>
        <wysiwyg-tool-unordered></wysiwyg-tool-unordered>
        <wysiwyg-tool-indent></wysiwyg-tool-indent>
        <wysiwyg-tool-outdent></wysiwyg-tool-outdent>
        <wysiwyg-tool-justify right center full></wysiwyg-tool-justify>
        <wysiwyg-tool-heading h1 h2 h3 h4 h5 h6></wysiwyg-tool-heading>
        <wysiwyg-tool-blockquote></wysiwyg-tool-blockquote>
    </wysiwyg-e>
    <iron-ajax url="../README.md" handle-as="text" id="ajax"></iron-ajax>
     </template>

     <script>
     window.addEventListener(
             'WebComponentsReady',
               function () {
                var ironAjax = document.querySelector('iron-ajax'), wysiwygE 
       = document.querySelector('wysiwyg-e');

                ironAjax.addEventListener(
                    'response',
                    function () {
                        var value = marked(this.lastResponse);
                        wysiwygE.value = value.replace(new 
         RegExp('https://miztroh.github.io/bower_components/wysiwyg-e/', 
                 'g'), '../');
                    }
                );

                ironAjax.generateRequest();
            // };
        // );
         </script>
       </dom-module>

Answer 1

你能尝试更多的Polymer，并重写你的<iron-ajax>吗？和<script>标签？例如

<iron-ajax url="../README.md" handle-as="text"
    auto on-response="handleResponse"></iron-ajax>

<script>
    class KeyBar extends Polymer.Element {
        handleResponse(event, request) {
            var value = marked(event.detail.response);
            // ...
        }
    }
    customElements.define('custom-keybar', KeyBar);
</script>