Search code examples
dartdart-polymer

Declaration custom element in html without code behind in the Polymer library


Can I declare custom element only in a html-file without a dart-code behind (.dart file) in the Polymer library?

I would like to have only a html markup of custom element. Also the markup may contains some inline dart-code (for example, an initialization code and events handling methods). Is it possible?


Solution

  • EDIT

    not tested but I think it should work

    <polymer-element name='my-element'>
      <template>
        <div>some content</div>
        <button on-click='{{clickHandler}}'>click me</button>
      </template>
      <script type='application/dart'>
    import 'package:polymer/polymer.dart';
    
    @CustomTag('my-element') 
    class MyElement extends PolymerElement {
      MyElement.created() : super.created();
    
      void clickHandler(Event e) {
        print(e.target.toString());
      }
    }
    
      </script>
    </polymer-element>
    

    EDIT END

    Just add the attribute noscript.

    <polymer-element name='my-element' noscript>
      <template>
        <div>some content</div>
      </template>
    </polymer-element>
    

    In Dart inheriting from such a component (<polymer-element name='my-other-element' extends='my-element>...) doesn't work well especially if the derived element has an associated Dart class (works fine in Polymer.js).