Search code examples
jquerydompolymershadow-dom

Polymer and Jquery selector

I have the following code using Polymer: 

<polymer-element name="new-post-page">
    <template>
        <div id="trumbowyg-demo"></div>
    </template>
    <script>
        Polymer("new-post-page", 
        {
        });
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>window.jQuery</script>
    <script src="../../bower_components/trumbowyg/dist/trumbowyg.min.js"></script>
    <script>$('#trumbowyg-demo').trumbowyg();</script>
</polymer-element>

As you can see I use the Jquery selector in order to show the WYSIWYG editor. Unfortunalety it does not happen anything. It works outside the polymer element definition which is why I think this has something to do with the issue.

How can I fix this problem?

Solution

  • trumbowyg-demo is not inside the DOM, it's only inside the shadow DOM of your element. You can use the standard CSS selector or the Polymer $ map to get your element and then convert it to a jQuery object: 

    $(this.$.trumbowyg-demo).trumbowyg()

    You need to be in a Polymer method to access the this variable. You should move your code to a domReady method.

    There is probably a jQuery syntax to use the selector from the shadow DOM too (something like $(this.shadowDOM).find('#trumbowyg-demo')), but I don't know the exact syntax.