I created a custom Polymer Dart element that extends another custom element. The parent element has a style defined containing a :host selector. When adding the parent element to the DOM, the style is applied as expected.
When extending the parent element and adding the child element to the DOM, the style defined for the parent element is not always applied. When testing the following code in Dartium v36.0.1985.97 (280598) or Chrome v35.0.1916.153, both elements are displayed with the proper style applied. When tested in Firefox 28.0 and Chrome v34.0.1847.116 Ubuntu 14.04 aura (260972), only the parent element has the style applied.
pubspec.yaml:
name: myapp
dependencies:
polymer: ">=0.12.0-dev <0.12.0"
transformers:
- polymer:
entry_points: web/index.html
index.html:
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
</head>
<body>
<link rel="import" href="packages/polymer/polymer.html">
<!-- parent element -->
<polymer-element name="my-parent">
<template>
<style>
:host {
background:red;
}
</style>
<content></content>
</template>
</polymer-element>
<script type="application/dart" src="my-child.dart"></script>
<!-- child element -->
<polymer-element name="my-child" extends="my-parent">
</polymer-element>
<script type="application/dart" src="my-parent.dart"></script>
<p><my-parent>RED? (parent elment)</my-parent>
<p><my-child>RED? (child element)</my-child>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
Output in Dartium v36.0.1985.97 (280598) and Chrome v35.0.1916.153:
(I need 10 reputation to post images, so please see result at: http://s30.postimg.org/8j3x3l2m9/Dartium.png)
Output in Firefox 28.0 and Chrome v34.0.1847.116 Ubuntu 14.04 aura (260972)
(Result at: http://s1.postimg.org/f210lwhj3/Firefox.png)
I am inclined to classify this as a bug but would appreciate feedback from the SO community to see if there is anything wrong with my implementation. Are there any additional steps required to ensure the styled defined in the parent element is also applied when creating a child element?
Related
Аfter compiling Dart code (which use Dart Polymer) to JS. I get the following error:
Uncaught Exception: The "smoke" library has not been configured.
Make sure you import and configure one of the implementations
(package:smoke/mirrors.dart or package:smoke/static.dart).
Sometimes the message was:
No elements registered in a while, but still waiting on 1 element to be registered. Check that you have a class with an #CustomTag annotation for each of the following tags: 'app-element'
What's wrong here? Here is my code:
UPDATE: now code beyond is improved and work correctly after pub build. I change folder/file structure and update polymer to the latest version.
pubspec.yaml
name: app
dependencies:
browser: any
#do not forget update to latest version by running pub update
polymer: any
transformers:
- polymer:
entry_points:
- web/main.html
web/templates/ui-elements.html
<polymer-element name="app-globals"></polymer-element>
<polymer-element name="app-element">
<template>
<link rel="stylesheet" href="/main.css"/>
<content></content>
</template>
<script type="application/dart" src="ui-elements.dart"></script>
</polymer-element>
web/templates/ui-elements.dart
#CustomTag('app-globals')
class AppGlobals extends PolymerElement{
AppGlobals.created() : super.created();
}
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created();
}
web/main.html (dummy entry file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<app-element></app-element>
<script type="application/dart" src="main.dart"></script>
</body>
</html>
web/main.dart
import 'package:polymer/polymer.dart';
main() {
initPolymer();
}
#whenPolymerReady
void onReady() {
}
web/main.html (entry point) after pub build. Real mess after compiling. So many js files some of them takes size even more than 300kb.
<!DOCTYPE html><html lang="en"><head><script src="packages/web_components/webcomponents.min.js"></script><script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body><div hidden=""><style shim-shadowdom="">
/*******************************
Flex Layout
*******************************/
html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
......tons of other styles...........
</style>
<script src="packages/polymer/src/js/polymer/polymer.min.js"></script>
<script>
// TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
// script tag is necessary to work around a bug in Chrome 36.
</script>
<!-- unminified for debugging:
<link rel="import" href="src/js/polymer/layout.html">
<script src="src/js/polymer/polymer.js"></script>
-->
<polymer-element name="app-globals"></polymer-element>
<!-- APP ELEMENT -->
<polymer-element name="app-element" class="bck-medusa w-100 h-100">
<template>
<link rel="stylesheet" href="../main.css">
<content></content>
</template>
</polymer-element>
</div>
<script src="main.html.polymer.bootstrap.dart.js" async=""></script>
</body></html>
You don't need initPolymer when you use #whenPolymerReady. The entire main() method is redundant in your example.
Did you register your entry page properly in the Polymer transformer configuration in pubspec.yaml?
Smoke needs a transformer but if you have the Polymer transformer configured properly the Smoke transformer is included.
I'm trying to do a single page application (SPA) using web components as in the linked example. But with Dart instead of javascript. I'd like to put the whole <core-scaffold> in a Polymer Element. The layout is working as expected, but when I get to the part "Simplifying the markup using a data model" I can't understand how to bind my dart model equivalent to the javascript model in the example. Should this attribute <template is="auto-binding"> be in the main template of the Polymer element, or where does that go? Any pointers from you experts?
Edit: OK, I'm adding some code to this question.
In darteditor i started a new project with the option using polymer library selected. In the created main-html-file all I did was remove the "counter"-attribute in <click-counter>. I added these dependencies paper_elements: 0.5.0, polymer: any I replaced everything in clickcounter.dart with:
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('click-counter')
class ClickCounter extends PolymerElement {
#observable var route = 0;
#observable List<dynamic> pages = [
{'name': 'Single', 'hash': 'one'},
{'name': 'page', 'hash': 'two'},
{'name': 'app', 'hash': 'three'}
];
ClickCounter.created() : super.created() {
}
}
And I replaced everything in clickcounter.html with:
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_scaffold.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/core_elements/core_item.html">
<link rel="import" href="packages/core_elements/core_transition.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">
<link rel="import" href="packages/core_elements/core_animated_pages/transitions/core_transition_pages.html">
<link rel="import" href="packages/paper_elements/paper_item.html">
<polymer-element name="click-counter">
<template>
<style>
</style>
<core-scaffold>
<core-header-panel navigation flex mode="waterfall">
<core-toolbar>Application</core-toolbar>
<core-menu theme="core-light-theme" valueattr="hash" selected="{{route}}">
<template repeat="{{page in pages}}">
<paper-item icon="settings" label="{{page['name']}}" hash="{{page['hash']}}">
<a _href="#{{page['hash']}}"></a>
</paper-item>
</template>
</core-menu>
</core-header-panel>
<div tool>Title</div>
<core-animated-pages selected="{{route}}" transitions="slide-from-right">
<template repeat="{{page in pages}}">
<section hash="{{page['hash']}}" layout vertical center-center>
<div>{{page['name']}}</div>
</section>
</template>
</core-animated-pages>
</core-scaffold>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
I run in Dartium, and see a fine layout with the three menu options. The main area has the word "single" at startup, as the first menu option is selected. When I click the second menu option I get this error:
Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
at core-animated-pages.Polymer.applySelection (http://localhost:8081/spa_test.html:939:15)
at core-animated-pages.Polymer.selectedItemChanged (http://localhost:8081/spa_test.html:4389:14)
at core-animated-pages.g.invokeMethod (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:13:25932)
at core-animated-pages.g.notifyPropertyChanges (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:13:24037)
at Object.x.report_ (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:18274)
at Object.S.check_ (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:22612)
at c (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:12181) polymer.concat.js:4861
If you put everything in a Polymer element you use this Polymer element instead of <template is="auto-binding"> not in addition to. The model is the class of the Polymer element that contains <core-scaffold>.
If you add more code that shows what you try to accomplish it is easier to make concrete suggestions.
Update
I changed
#observable var route = 'one';
to get rid of the exception
and added
routeChanged(oldVal, newVal) {
print(newVal);
}
to see what values are assigned (prints 'one', 'two', 'three').
and also added
<link rel="import" href="packages/paper_elements/paper_item.html">
I like to use my custom Polymer Element named content-page in my main-html.
Therefore I created a div with the id="contentcontainer" which contains my content-page.
For some reason it crashes, just after clicking on Run and the Dart Editor says: .
When I delete the line <link rel="import" href="content-page.html"> in main.html, the program isnt crashing, but there seems to be a Problem with the content of my main().
I unfortunately have no specific question, because I dont know where the error might be or where to start. Does someone see some suspicious parts in my code?
Thanks for helping!
main.dart:
import 'dart:html';
void main() {
var newElement = new Element.tag('content-page');
querySelector('#contentcontainer').children.add(newElement);
}
main.html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="application/dart" src="main.dart"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="content-page.html">
</head>
<body>
<div id="contentcontainer">
<content-page id="contentpage"></content-page>
</div>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
content-page.dart:
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('content-page')
class ContentPage extends PolymerElement {
ContentPage.created() : super.created();
}
content-page.html:
<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="content-page" >
<template>
<div>
ContentPage-Content
</div>
</template>
<script type="application/dart" src="content-page.dart"></script>
</polymer-element>
I tried your code and it's ok. Have you added the transformers to your pubspec.yaml?
name: sample
description: A sample web application
dependencies:
browser: any
polymer: any
transformers:
- polymer
You should have a look at this question/answer: how to implement a main function in polymer apps how to use a custom main method in a Polymer project.
This line should contain your file containing your main method (see also the answer in the linked question):
<script type="application/dart">export 'package:polymer/init.dart';</script>
this line is then redundant
<script type="application/dart" src="main.dart"></script>
the transformer configuration also needs a list of entry pages if you don't use the latest Polymer version
transformers:
- polymer:
entry_points:
- web/index.html
I am working through the dart todo sample application. I haven't changed any code but I see lots of squiggles in the editor.
<polymer-element name="simple-router">
<script type="application/dart;component=1"
src="simple_router.dart"></script>
</polymer-element>
The error I'm seeing reads.
Wrong script type, expected
type="application/dart".
I don't understand what this means. When I strip off the ;component=1. It really breaks the application.
This is code that was valid in Polymer about ">= 0.10.5 <0.11.0" but there were several changes.
;component=1 Should be remove from all script tags.
The imports and script tags in the entry page should look like
<html>
<head>
<title>core-ajax-dart</title>
<!-- when the project uses polymer -->
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<!-- import individual polymer elements -->
<link rel='import' href='packages/core_elements/core_ajax_dart.html'>
</head>
<body>
<core-ajax-dart
url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"
auto></core-ajax-dart>
<!-- if you have a custom script file that contains a main() method -->
<script type="application/dart" src="core_ajax_dart.dart"></script>
<!-- else if you don't have a custom script file with a main() method
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
see here how to implement a custom main method.
how to implement a main function in polymer apps
The Dart editor currently supports only one dart polymer (/file) new project generation option. And this option sets up 4 files in the /web subdir without a main(), and arriving at a main requires some boiler-plate changes that were not totally obvious to me.
I was helped on the Dart Forum for this somewhat "howto" question by Guenter Zoeckbauer, so I want to share the results of those minimal changes to this nice minimal project, that has provided me with exactly the starting point need to re-base my outdated code and file structure on.
It seems to me it provides good starting point reference for re-building apps that have gotten out of date with all the rapid and IMPORTANT changes that have been made in the last few months.
Here are the 6 files as they must be modified (the app name is: app_with_main):
1 app_with_main.css NO CHANGE
2 clickcounter.dart NO CHANGE
3 clickcounter.html NO CHANGE
4 index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="clickcounter.html">
<!-- ORIGINAL SCRIPT
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
-->
<link rel="stylesheet" href="app_with_main.css">
</head>
<body>
<h1>App with main</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
<script type="application/dart">export 'init.dart';</script>
</body>
</html>
#5 . init.dart (new)
import "package:polymer/polymer.dart";
main() {
print("always before polymer initialization is complete");
initPolymer().run(() {
print('''Code here will be called almost immediately and cannot rely
on the polymer elements being instantiated.''');
Polymer.onReady.then((_) {
print('''at this point the onReady callback has been returned and thus the polymer
initialization process will be complete''');
});
});
6 The project yaml file must be modified to set the entry_point to index.html thus:
name: app_with_main
description: A sample Polymer application
dependencies:
polymer: ">=0.11.0-dev.2 <0.12.0"
transformers:
- polymer:
entry_points: web/index.html
And that should do it, you should be off and running with a code structure that can grow with your project for a long time....
Thanks again to Dart Super Hero Guenter Zoecchbauer!
For reference and comparison I think it is useful to also consider the skeleton Polymer Dart app that gets generated by the Chrome Dev Editor. It includes a Dart main().
Below I've posted index.html, and main.dart from the web folder of a freshly generated Polymer Dart Paper elements project (as of 2014-10-10).
Note that these reference a sample_app custom element which gets generated into the lib folder, but pasting that below as well would be too long.
1. Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HelloDartWebPaper</title>
<link rel="stylesheet" href="styles.css">
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/HelloDartWebPaper/sample_app.html">
</head>
<body unresolved>
<sample-app></sample-app>
<script src="main.dart" type="application/dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
2. main.dart
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_toast.dart';
import 'package:HelloDartWebPaper/sample_app.dart';
void main() {
// Init polymer.
initPolymer();
// Register Polymer components (ones that are actually used in the app).
registerWidgetsWithPolymer();
}
#initMethod
void postPolymerBoot() {
print('Polymer init complete.');
}
void registerWidgetsWithPolymer() {
upgradePaperToast();
Polymer.register('sample-app', SampleApp);
}
styles.css
omitted - not relevant
sample_app component in lib.