webcomponent-loader.js is not able to dispatch the event when component is ready in dom. document.dispatchEvent(new CustomEvent('WebComponentsReady', {bubbles: true})); I am trying to create wysiwyg-e component and it does not let the component load when dom is ready. it stops serving whole polymer application because of addEventListner. ERROR::Uncaught TypeError: Cannot read property 'addEventListener' of null. <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></html> </html> |