Custom element's 'created' constructor called twice #20197

DartBot · 2014-07-25T01:13:15Z

This issue was originally filed by @almstrand

The following is the minimal code I came up with which demonstrates the problem.

pubspec.yaml
=============================

name: myapp
dependencies:
polymer: ">=0.12.0-dev <0.12.0"
transformers:

polymer:
entry_points: web/index.html

web/index.html:
=============================
<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
</head>
<body>
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="my-parent">
  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    @CustomTag("my-parent")
    class MyParent extends PolymerElement {
      MyParent.created() : super.created() {
        print("parent created");
      }
    }
  </script>
</polymer-element>

<polymer-element name="my-child" extends="my-parent">
  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    @CustomTag("my-child")
    class MyParent extends PolymerElement {
      MyParent.created() : super.created() {
        print("child created");
      }
    }
  </script>
</polymer-element>

<my-parent>parent elment</my-parent>
<my-child>child element</my-child>

Expected console log:

parent created (:1)
child created (:1)

Actual console log:

  parent created (:1)
  parent created (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12)
  child created (:1)

Reproduced in:

  Dart SDK version: 1.5.3
  Polymer package version: 0.12.0-dev
  Operating system: Ubuntu 14.04 64-bit
  Browser (if any): Dartium, version 36.0.1985.97 (280598)

sigmundch · 2014-07-28T22:57:49Z

Thanks for the bug report and the nice repro instructions!

Sounds like this is a duplicate of issue #15844. I'll make a note in that bug to try to use the instructions you provide here to investigate further.

Added Duplicate label.
Marked as being merged into #15844.

blois · 2014-07-29T16:45:48Z

I cannot repro 15844 but can repro this bug, so unlinking.

cc @sigmundch.
Added Triaged label.
Marked as being merged into #.

blois · 2014-07-29T16:54:25Z

The root of the issue appears to be that the child element class (confusingly named MyParent in the repro, but the intention is clear) extends from PolymerElement, but has an extends attribute for 'my-parent'.

document.registerElement validates the extends tag, but since that only gets the native element name, it is passed null for the extends tag (native element is HtmlElement).

The second parent creation is occurring within Polymer.js during registration of the my-child element.

DartBot · 2014-07-29T22:05:57Z

This comment was originally written by @almstrand

The initial sample code is updated below to:

correct the naming of the child element class: MyParent -> MyChild, and
break out the Dart and Web component code into separate files to work-around the following (possibly irrelevant) console warning:

warning: more than one Dart script tag in http://localhost:8080/index.html. Dartium currently only allows a single Dart script tag per document.

pubspec.yaml
=============================

    name: myapp
    dependencies:
    polymer: ">=0.12.0-dev <0.12.0"
    transformers:
    - polymer:
        entry_points: web/index.html

web/index.html
=============================

    <!DOCTYPE html>
    <html>
    <head>
        <title>index</title>
        <script src="packages/web_components/platform.js"></script>
        <script src="packages/web_components/dart_support.js"></script>
    </head>
    <body>
    <link rel="import" href="my-parent.html">
    <link rel="import" href="my-child.html">

<my-parent>parent element</my-parent>
<my-child>child element</my-child>

web/my-parent.html
=============================

web/my-child.html
=============================

web/MyParent.dart
=============================

import 'package:polymer/polymer.dart';

    @CustomTag("my-parent")
    class MyParent extends PolymerElement {
      MyParent.created() : super.created() {
        print("parent created");
      }
    }

web/MyChild.dart
=============================

import 'package:polymer/polymer.dart';

    @CustomTag("my-child")
    class MyChild extends PolymerElement {
      MyChild.created() : super.created() {
        print("child created");
      }
    }

This produces the same console output as in the original report, i.e.:

    parent created (:1)
    parent created (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12)
    child created (:1)

Per comment #3, I updated MyChild.dart as follows:

web/MyChild.dart
=============================

import 'MyParent.dart'; // <-- changed

    @CustomTag("my-child")
    class MyChild extends MyParent { // <-- now extends MyParent instead of PolymerElement
      MyChild.created() : super.created() {
        print("child created");
      }
    }

And then the base class constructor is invoked trice! :

    parent created (:1)
    parent created (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12)
    parent created (:1)
    child created (:1)

Assuming this implementation is correct, the issue seems fairly important as invoking a constructor more than once is bound to cause bugs due to initialization problems that may be hard to track down.

jakemac53 · 2014-07-31T21:55:13Z

Just to narrow things down, below is a slightly smaller and possibly more telling repro, https://gist.github.com/jakemac53/06adf5aca6c3a3aa1684.

I am not adding any parent or child tags (only definitions), yet I still get a log from the parent. It seems that adding the extends="foo" causes an instance of the extended class to be created, at least temporarily.

jakemac53 · 2014-09-09T14:48:28Z

Ran across this in a test I was porting as well, it looks like ready() is also being fired on the extra element.

jakemac53 · 2014-12-02T15:46:04Z

Discovered the actual cause of this when investigating issue #21466. Whenever registering a custom element that extends from another element, dart:html creates an instance of the base element and compares its type to make sure you are actually extending that class.

When registering a custom element in javascript, there is no such check. You can register an element which claims to extend 'input' with any arbitrary prototype.

This seems pretty broken to me, since custom elements can have static state that is affected whenever a new element is created, and they can be potentially expensive to create (firing off ajax requests for example).

jakemac53 · 2014-12-02T17:34:06Z

Edit: It actually looks like this only happens when extending native html types, which is much safer.

Polymer.js was creating instances of the base tag when trying to figure out if the element had been registered or not. We are now registering all dart custom elements with polymer so that it doesn't have to do that.

jakemac53 · 2014-12-02T17:35:48Z

Set owner to @jakemac53.

DartBot · 2015-06-05T23:08:48Z

This issue has been moved to dart-archive/polymer-dart#248.

vishnumohan89 · 2016-11-08T14:08:58Z

I had this same issue with an element (my-login), this was used inside my-menu element. This my-menu element was used twice. So this in turn, initializes my-login element twice also. I fixed the issue, by using conditional binding.

Hope this helps someone.

DartBot added Type-Defect area-pkg Used for miscellaneous pkg/ packages not associated with specific area- teams. labels Dec 2, 2014

DartBot assigned jakemac53 Dec 2, 2014

sigmundch mentioned this issue Jun 3, 2015

Constructor being called twice - only when the code is tested dartium. The generated javascript code behaves correctly #15844

Closed

DartBot mentioned this issue Jun 5, 2015

Custom element's 'created' constructor called twice dart-archive/polymer-dart#248

Closed

DartBot closed this as completed Jun 5, 2015

kevmoo removed triaged labels Mar 1, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom element's 'created' constructor called twice #20197

Custom element's 'created' constructor called twice #20197

DartBot commented Jul 25, 2014

sigmundch commented Jul 28, 2014

blois commented Jul 29, 2014

blois commented Jul 29, 2014

DartBot commented Jul 29, 2014

jakemac53 commented Jul 31, 2014

jakemac53 commented Sep 9, 2014

jakemac53 commented Dec 2, 2014

jakemac53 commented Dec 2, 2014

jakemac53 commented Dec 2, 2014

DartBot commented Jun 5, 2015

vishnumohan89 commented Nov 8, 2016

Custom element's 'created' constructor called twice #20197

Custom element's 'created' constructor called twice #20197

Comments

DartBot commented Jul 25, 2014

sigmundch commented Jul 28, 2014

blois commented Jul 29, 2014

blois commented Jul 29, 2014

DartBot commented Jul 29, 2014

jakemac53 commented Jul 31, 2014

jakemac53 commented Sep 9, 2014

jakemac53 commented Dec 2, 2014

jakemac53 commented Dec 2, 2014

jakemac53 commented Dec 2, 2014

DartBot commented Jun 5, 2015

vishnumohan89 commented Nov 8, 2016