CODEWITHSUNDEEP
dartdart-polymer
jbaxe2
jbaxe2

Reputation: 280

Current means to extend custom element in Dart Polymer?

I am attempting to create some custom elements that all extend a single custom element, using Polymer and Dart. Following the directions from Seth Ladd's G+ post here (although outdated and unmaintained, still the only reference I could find for extending custom [non-DOM] elements):

https://plus.google.com/+SethLadd/posts/7Ed4GUWZB26

Here is a stripped-down example code of the type of thing I'm attempting to do:

Base element HTML:

<link rel='import' href='packages/polymer/polymer.html'>
<polymer-element name='base-element'>
<template>
  ... stuff here relating to template ...
</template>
<script type='application/dart' src='base-element.dart'></script>
</polymer-element>

Base element Dart:

import 'package:polymer/polymer.dart';
@CustomTag('base-element')
class BaseElement extends PolymerElement {
  BaseElement.created() : super.created();
  ... other base class stuff here ...
}

First custom sub-classed element HTML:

<link rel='import' href='packages/polymer/polymer.html'>
<link rel='import' href='base-element.html'>
<polymer-element name='sub-element-1' extends='base-element'>
<script type='application/dart' src='base-element.dart'></script>
</polymer-element>

First custom sub-classed element Dart:

import 'package:polymer/polymer.dart';
import 'base-element.dart';
@CustomTag('sub-element-1')
class SubElement1 extends BaseElement {
  SubElement1.created() : super.created();
  ... other subclass stuff here ...
}

The main issue I'm having is an error the Dart Editor is giving me (during runtime):

"Breaking on exception: NotSupportedError: Registration failed for type 'sub-element-1'. The tag name specified in 'extends' is a custom element name. Use inheritance instead."

The editor appears to dislike the extends='base-element' part in the sub-element's HTML. But if you take that part out, the base element's templated HTML is ignored, even though the Dart code does use inheritance. So, ultimately my questions for this post is:

How do you currently create custom elements that extend other custom elements, so they use the base element's template?

Any help and/or info would be greatly appreciated, and thanks in advance.

Upvotes: 5

Views: 519

Answers (1)

jbaxe2
jbaxe2

Reputation: 280

I apparently had a typo when importing the base element's Dart file (in my actual code, not the example above), which threw everything else off. This still is the correct means to extend a custom element, and a sub-element will use the base element's template. Sometimes the littlest of things can cause the greatest of headaches when programming...

Upvotes: 1

Related Questions