How to embed a jquery ui widget into a polymer-dart webcomponent

Issue

I try to embed a jquery ui widget, f.e. a datepicker into a polymer-dart webcomponent.

The Webcomponent is defined like that:

<polymer-element name="my-datepicker">
    <template>
        <div id="datepicker"></div>
    </template>
    <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

The initialisation of this widget is done in JS like that

<script>
    $(function() 
    { $( "#datepicker" ).datepicker();});
</script>

How can I initialize that widget in dart in my polymer.dart webcomponent.

I tried with ‘dart:js’ to call that method, but I cannot access the shadow dom with dart:js.

With

shadowRoot.querySelector("#datepicker")

I can access the shadow-dom, but how can I call a JS method – datepicker() – on that

Solution

You can pass an element to jQuery instead of a selector. So the following code should work :

final element = $['datepicker'];
js.context.callMethod(r'$', [element]).callMethod('datepicker');

Answered By – Alexandre Ardhuin

Answer Checked By – Mary Flores (FlutterFixes Volunteer)