CODEWITHSUNDEEP
dartdart-polymer
Juri Krainjukov
Juri Krainjukov

Reputation: 742

How to use polymer element inside another polymer element

I'm trying to make nested polymer elements. Editor shows no errors or warnings.

componentone.html

<link rel="import" href="componenttwo.html">

<polymer-element name="component-one" noscript>
   <template>
      <h1>Parent element</h1>
      <component-two></component-two>
   </template>
</polymer-element>

componenttwo.html

<polymer-element name="component-two" noscript>
   <template>
    <h2>Nested element</h2>   
   </template>
</polymer-element>

testcomponents.html

<html>
   <head>
      <link rel="import" href="componentone.html">
      <script src="packages/polymer/boot.js"></script> 
      <script src="packages/browser/interop.js"></script>
   </head>

   <body>   
      <component-one></component-one>

      <script type="application/dart" src="testcomponents.dart"></script>
   </body>
</html>

When I run testcomponents.html nothing appears in browser, but in the editor console There's an error

Invalid CSS property name: -webkit-touch-callout
Exception: Stack Overflow
   runMicrotask (package:observe/src/microtask.dart:63:45)
   initPolymer (package:polymer/src/loader.dart:32:15)
   main (http://127.0.0.1:3030/jukudart2/web/testcomponents.html:5:22)
   registerCustomElement (package:custom_element/custom_element.dart:62:25)
   initPolymer.<anonymous closure> (package:polymer/src/loader.dart:39:26)
   runMicrotask.<anonymous closure> (package:observe/src/microtask.dart:65:16)

Upvotes: 2

Views: 2481

Answers (2)

Christophe Herreman
Christophe Herreman

Reputation: 16085

I tried your example and got the same error.

It worked when I added a dart file for both components and specified the CustomTag annotation:

componentone.html

<link rel="import" href="componenttwo.html">

<polymer-element name="component-one">
   <template>
      <h1>Parent element</h1>
      <component-two></component-two>
   </template>

   <script type="application/dart" src="componentone.dart"></script>
</polymer-element>

componentone.dart

import 'package:polymer/polymer.dart';

@CustomTag("component-one")
class ComponentOne extends PolymerElement {  
}

componenttwo.html

<polymer-element name="component-two">
   <template>
    <h2>Nested element</h2>
   </template>
   <script type="application/dart" src="componenttwo.dart"></script>
</polymer-element>

componenttwo.dart

import 'package:polymer/polymer.dart';

@CustomTag("component-two")
class ComponentTwo extends PolymerElement {
}

Upvotes: 4

Matt B
Matt B

Reputation: 6312

In componentone.html try putting the link inside of the polymer element tag but before the template tag. (Sorry for my brevity, on mobile)

Upvotes: 0

Related Questions