Polymer Dart with JS in the template (using third party libs)

Question

I'd like to use a component library (Kendo UI) with Polymer and Dart and keep as much of the component initialization as possible in plain JS in the HTML template file. (The Kendo lib doesn't have Dart bindings and I don't want to blaze that trail...) Now, using these components requires running some JavaScript to initialize the divs. The difficulty I'm having is getting the script tag to be able to see the elements in the shadow DOM and to run at the proper time after polymer is initialized.

I have found a somewhat reasonable solution by fetching the div within the Dart Polymer class ready() function and using JS context to call back into my template to run a JS function there, passing the div back to it. e.g.

e.g. in one custom tag's template file I have:

<script type='text/javascript'>
    function initKendo(panel) {
        $(panel).kendoPanelBar({
            expandMode: 'multi'
        });
    }
</script>

and from Dart I call it with:

ready(){    
    js.context.initKendo( $['myPanel'] );
}

This does work, but feels like a hack and I'm worried about what issues I may run into down the road.

My questions are:

1. Is there a more direct way to accomplish this within the script tag in the HTML template file (without the callback). I have experimented with registering for Polymer.ready() and fetching using shadowDom to query my div, and it sort of tries to work but all my styles are lost for some reason... And I'm worried that mixing plain Polymer and Dart Polymer may be bad.

2. Is this general approach feasible? What are the limits to what I can put into a Polymer template file and what kind of problems might I have with third party libs not dealing well with the shadow dom? So far simple stuff seems to work if I just import it (e.g. libs and styles) at the top of my template file.

3. What other options do I have if I want to use a third party lib with Dart for controller logic at this point? How should I break up my HTML if not Polymer?

Answer 1

1) You should be able to call jQuery from Dart without creating a JS function How to call a jQuery function from Dart?

It's weird that your styles should get lost when you access the shadowDOM using JavaScript. Can you provide some code how you did it?

2) global styles which don't support shadowDOM will cause some trouble. With Bootstrap it often helped to link the styles file inside each Polymer element. When styles or JavaScript have to cross shadow-boundaries inside an element this will not work (when you have some kind of descendant selector where the ancestor is outside of a shadowDOM and the descendant inside of it)

3) I guess the best option is to use Angular.dart. Angular.dart supports components without shadowDOM