javascript - Using the jQuery input mask plugin with a Dart Web UI component -

I'm trying to use the jQuery plugin in DART. The plugin works fine when the element I'm trying to add a mask to is not in the web component, but when I add it to a web component it does not work. And for the code that does not work, I'm able to run $ ("# phone-number"). Mask ("(999) 999-9999"); works fine through Chrome console.

This code works:

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Body & gt; & Lt; Input id = "phone-number" type = "text" & gt; & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> & Lt; Script src = "jquery.maskedinput.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "application / dart" & gt; Import 'package: JS / JS dart' as JS; Zero Main () {js.scoped (() {var a = js.context.jQuery ("# ​​phone-number"); a.mask ("(999) 999-9999");}; } & Lt; / Script & gt; & Lt; Script src = "packages / browser / dart.js" & gt; & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 This code does not work:  
  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Body & gt; & Lt; Element name = "x-phone-number" & gt; & Lt; Templates & gt; & Lt; Input id = "phone-number" & gt; & Lt; / Template & gt; & Lt; / Element & gt; & Lt; X-phone-number & gt; & Lt; / X-phone-number & gt; & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> & Lt; Script src = "jquery.maskedinput.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "application / dart" & gt; Import 'package: JS / JS dart' as JS; Zero Main () {js.scoped (() {var a = js.context.jQuery ("# ​​phone-number"); a.mask ("(999) 999-9999");}; } & Lt; / Script & gt; & Lt; Script src = "packages / browser / dart.js" & gt; & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt; The possibility of components that are not fully prepared until the main loop is running decreases.    
 
 
, Try adding a timer to kick the query this way. .  
  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Body & gt; & Lt; Element name = "x-phone-number" & gt; & Lt; Templates & gt; & Lt; Input id = "phone-number" & gt; & Lt; / Template & gt; & Lt; / Element & gt; & Lt; X-phone-number & gt; & Lt; / X-phone-number & gt; & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> & Lt; Script src = "jquery.maskedinput.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "application / dart" & gt; Import 'package: JS / JS dart' as JS; Import 'dart: async'; Void _postMainSetup () {js.scoped (() {var a = js.context.jQuery ("# ​​phone-number"); a.mask ("(999) 999-9999");}); } Zero main () {Timer.run (_postMainSetup); } & Lt; / Script & gt; & Lt; Script src = "packages / browser / dart.js" & gt; & Lt; / Script & gt; & Lt; Script src = "packages / browser / interop.js" & gt; & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 I also interop.js script which is required in the latest SDK as jsinterop functionality is divided by dart.js.