I wanted to start to port my Polymer 1.0 application to Polymer 2.0 (preview).
I used <template is="dom-bind"> in my index.html to support data bindings. Is this also possible with Polymer 2? I tried <dom-bind> as a component, but it did not work.
In Polymer 2.0, make sure to wrap the <template> inside <dom-bind> as described in the upgrade guide. It's also important to include polymer.html, which imports dom-bind.html (instead of only polymer-legacy.html).
Polymer 1.0:
<template is="dom-bind" id="app">
...
</template>
Polymer 2.0:
<dom-bind id="app">
<template>
...
</template>
</dom-bind>
const app = document.getElementById('app');
app.message = 'Hello world!';
app.counter = 0;
app._onClick = function() {
this.counter++;
};
<head>
<base href="https://polygit.org/polymer+2.2.0/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<dom-bind id="app">
<template>
<div>[[message]]</div>
<div>[[counter]]</div>
<button on-click="_onClick">Increment</button>
</template>
</dom-bind>
</body>
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 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 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?
I'm having a hard time getting my polymer custom element to render content within a container <div> without the <div> showing up in the light DOM.
<polymer-element name="impress-slide" constructor="ImpressSlide" attributes="exitAnimation entryAnimation">
<link rel="stylesheet" href="animate-custom.css">
<template>
<style type="text/css">
...
</style>
<div>
<content></content>
</div>
</template>
<script type="text/javascript">
...
</script>
</polymer-element>
renders as
<impress-slide>
<div> (Content) </div>
</impress-slide>
Can anyone give me some insight into how I can render the containing <div> in shadow DOM?
It depends on what browser & version you're using. Some of them have old versions of the Shadow DOM spec, and so Polymer has to polyfill it instead of using it natively to get the features it needs.
I'm using Chrome 33.0.1750.22 dev and Shadow DOM is still polyfilled for me unless I turn on the "Enable experimental Web Platform features" flag in about:flags.
Include
<script>
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
before polymer import to enable custom elements to render inside shadow dom aka #shadow-root
I got a problem while deploying Dart code using Polymer to Javascript. I've created a polymer application with DartEditor and made a simple example. This example works in Dartium but when I try to build it as a Polymer App (in Javascript) and launch it, the app fails.
How am I supposed to convert a Dart Polymer app to Javascript ?
Here's the example code I made that fails :
example.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="import" href="example-polymer.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<div is="example-polymer"></div>
</body>
</html>
example-polymer.html
<polymer-element name="example-polymer" extends="div">
<template>
<div>
<input on-change="{{ change }}"/><br>
<span>Text : {{ text }}</span>
</div>
</template>
<script type="application/dart" src="example-polymer.dart"></script>
</polymer-element>
example-polymer.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('example-polymer')
class ExampleBolymer extends DivElement with Polymer, Observable {
#published String text = "" ;
ExampleBolymer.created() : super.created() {
}
void change(Event e, var detail , InputElement target) {
text = target.value;
}
}
add
transformers:
- polymer:
entry_points:
- web/example.html
to your pubspec.yaml
and call
pub build
Your files should be in the web directory of your package.