I'm trying to style distributed nodes in Dart Polymer with no luck. I'm using the example at:
http://www.polymer-project.org/articles/styling-elements.html#style-distributed
as a starting point. However, I can't even get that working once ported to Dart. Here is my code:
<polymer-element name="test-element">
<template>
<style>
content[select="p"]::content * { /* anything distributed here */
font-weight: bold;
}
/* #polyfill p:first-child */
::content p:first-child {
color: red;
}
/* #polyfill footer > p */
::content footer > p {
color: green;
}
/* #polyfill :host > p */
::content > p { /* scope relative selector */
color: blue;
}
</style>
<content select="p"></content>
<content></content>
</template>
<script type="application/dart" src="testelement.dart"></script>
</polymer-element>
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="testpolymer.css">
<!-- import the test-element -->
<link rel="import" href="testelement.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>TestPolymer</h1>
<p>Hello world from Dart!</p>
<test-element>
<p>I'm red and bold</p>
<p>I'm blue and bold</p>
<footer>
<p>I'm also red</p>
<p>I'm green</p>
<span>I'm black</span>
</footer>
</test-element>
</body>
</html>
The output has no styling applied and is just black text for everything. Any ideas what I'm doing wrong?
polymer-elements polymer-flex-layout / polymer-flex-layout.css still use
::-webkit-distributed(p) {
color: red;
}
which also works in my recent version of Dartium.
I have no idea when the new selectors take effect.
Other polymer-elements that make use of this selector but have recently switched to ::content
polymer-ui-field
polymer-ui-menu-item
polymer-ui-nav-arrow
polymer-ui-pages
polymer-ui-sidebar
polymer-ui-toolbar
You can browse the history to find the previous webkit-distributed selector examples.
I guess they use Chromium which may be a little ahead of Dartium.
Related
How can I avoid embedding css files to output html files during pub build (generate js)? Is it possible?
note: polymer version is 0.10.0-pre.11
Before pub build:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<link rel="stylesheet" href="cc.css">
<link rel="import" href="packages/polymer/polymer.html">
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>Cc</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
After pub build:
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- import the click-counter -->
</head>
<body><style>body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p {
color: #333;
}
#sample_container_id {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
</style>
<!--
These two files are from the Polymer project:
https://github.com/Polymer/platform/ and https://github.com/Polymer/polymer/.
You can replace platform.js and polymer.html with different versions if desired.
-->
<!-- minified for deployment: -->
<!-- unminfied for debugging:
<script src="../../packages/web_components/platform.concat.js"></script>
<script src="src/js/polymer/polymer.concat.js"></script>
<link rel="import" href="src/js/polymer/polymer-body.html">
-->
<!-- Teach dart2js about Shadow DOM polyfill objects. -->
<!-- Bootstrap the user application in a new isolate. -->
<!-- TODO(sigmund): replace boot.js by boot.dart (dartbug.com/18007)
<script type="application/dart">export "package:polymer/boot.dart";</script>
-->
<script src="packages/polymer/src/js/use_native_dartium_shadowdom.js"></script>
<!--<script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<!-- <link rel="import" href="../polymer-dev/polymer.html"> -->
<script src="packages/polymer/src/js/polymer/polymer.js"></script><polymer-element name="polymer-body" extends="body">
<script>
// upgrade polymer-body last so that it can contain other imported elements
document.addEventListener('polymer-ready', function() {
Polymer('polymer-body', Platform.mixin({
created: function() {
this.template = document.createElement('template');
var body = wrap(document).body;
var c$ = body.childNodes.array();
for (var i=0, c; (c=c$[i]); i++) {
if (c.localName !== 'script') {
this.template.content.appendChild(c);
}
}
// snarf up user defined model
window.model = this;
},
parseDeclaration: function(elementElement) {
this.lightFromTemplate(this.template);
}
}, window.model));
});
</script>
</polymer-element><script src="packages/web_components/dart_support.js"></script><script src="packages/polymer/boot.js"></script><polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
<script type="application/dart" src="cc.html.0.dart"></script><script src="packages/browser/dart.js"></script>
<h1>Cc</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body></html>
As you can see the css file is embedded to html..
Work around for this issue is to add to every element #import ('mystle.css')
eg.
<my-element name="my-element">
<template>
<style>#import ('mystyle.css')</style>
...
</template>
<my-element>
credits go to John Messerly who invented the solution - see the thread here:
https://groups.google.com/a/dartlang.org/forum/?hl=en&fromgroups#!topic/web/8bjmkiRFhDk
Update
In Polymer.dart 0.12.1 an option was added to disable style inlining per file - see https://github.com/dart-lang/polymer-dart/blob/master/CHANGELOG.md#0121
transformers:
- polymer:
...
inline_stylesheets:
default: false
web/foo.css: true
packages/foo/bar.css: true
Original
There was an issue filed recently by a member of the Google PolymerDart team but it is not yet supported
https://code.google.com/p/dart/issues/detail?id=18597
I use dart-polymer package to create custom elements. I have noticed that there is some blinking during of page with the custom elements loading. This effect also is visible for the very simple ClickCounter app. Is there any way to avoid this vexing blinking?
The issue is good described in Wikipedia http://en.wikipedia.org/wiki/Flash_of_unstyled_content
The suggested solution from http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention does not work for the simple application (polymer: '0.10.0-pre.2')..
<html>
<head>
<title>Click Counter</title>
<!-- import the click-counter -->
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="clickcounter.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body unresolved>
<h1>CC</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
/**
* A Polymer click counter element.
*/
#CustomTag('click-counter')
class ClickCounter extends PolymerElement {
#published int count = 0;
ClickCounter.created() : super.created() {
}
void increment() {
count++;
}
}
see also the created issue in code.google.com https://code.google.com/p/dart/issues/detail?id=17498
Polymer 0.9.5
The class names to use are polymer-veiled (hidden) and polymer-unveil (during unveil transition)
If it is different than in Polymer.js it is probably subject of change but as of PolymerDart 0.9.0 it should work.
The relevant code is in packages/polymer/src/boot.dart.
Polymer 0.10.0
Polymer 0.10.0-pre.1 uses already the unresolved attribute like explained here
Polymer - Styling reference - FOUC prevention
You need to add a version constraint in pubspec.yaml to get the development version like
polymer: ">=0.10.0-pre.1"
I am trying to change the default web application that uses the polymer library so that the polymer element is created and added to the DOM from DART code rather than including in the HTML. I have succeeded in adding the element to the DOM, but my observable variable are not being updated on the DOM. The events are being fired, and the values are changing. I have got the DOM to update using Observable.dirtyCheck(), however, this is apparently expensive, so am trying to figure out how to get polymer to update dom without dirtyCheck().
So, In short, how to I get rid of Observable.dirtyCheck()???
dynamiccreate.dart
library dynamiccreate;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer();
//create click-counter element at runtime from DART, not HTML
var NewElement = new Element.tag('click-counter');
NewElement.setAttribute("count", "5");
//Add to DOM
querySelector('#sample_container_id').children.add(NewElement);
}
dynamiccreate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="dynamiccreate.css">
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<!-- <script type="application/dart">export 'package:polymer/init.dart';</script> -->
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>DynamicCreate</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<!-- <click-counter count="5"></click-counter> -->
</div>
<script src="dynamiccreate.dart" type="application/dart"></script>
</body>
</html>
clickcounter.dart
import 'package:polymer/polymer.dart';
/**
* A Polymer click counter element.
*/
#CustomTag('click-counter')
class ClickCounter extends PolymerElement {
#published int count = 0;
ClickCounter.created() : super.created() {
}
//increment gets called when dynamically adding object at runtime
//But does not update count on DOM
void increment() {
count++;
//Have to add this to update count in DOM
Observable.dirtyCheck(); //<<<---How do I get rid of this???
}
}
clickcounter.html
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
Change your dynamiccreate.dart file to look like this, and the counter starts incrementing in the UI:
library dynamiccreate;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer().run(() {
var newElement = new Element.tag('click-counter');
newElement.setAttribute("count", "15");
querySelector('#sample_container_id').children.add(newElement);
});
}
Nit: name your variable newElement, not NewElement. Fixed here.
I'm trying to style a custom element tag, and can't seem to do it from within the element's <style> tag, or at least I don't know what selector to use. I've tried the custom element's tag name and template, but neither work.
<polymer-element name="my-test" constructor="MyTest">
<template>
<style>
my-test {
border: solid 1px #888; /* doesn't work */
}
.title {
color: blue; /* works */
}
</style>
<div class="title">{{ title }}</div>
</template>
I'm using polymer.dart, so there may be some lag in its implementation, but I'd like to know how it should work in polymer.js.
I think what you want is the #hostcss selector.
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host
As mentioned in another answer, to style the host of the shadow DOM, use #host selector. In the case of a custom element, the host of the custom element is itself.
Here is an example of how to style the host element, or the custom element itself, from within a custom element's <style> tag.
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="packages/polymer/boot.js"></script>
</head>
<body>
<polymer-element name="my-element">
<template>
<style>
#host {
my-element {
display: block;
border: 1px solid black;
}
}
p {
color: red;
}
#message {
color: pink;
}
.important {
color: green;
}
</style>
<p>Inside element, should be red</p>
<div id="message">
The message should be pink
</div>
<div class="important">
Important is green
</div>
<div>
<content></content>
</div>
</template>
<script type="application/dart" src="index.dart"></script>
</polymer-element>
<p>outside of element, should be black</p>
<div id="message">
The outside message should be black
</div>
<div class="important">
Outside important is black
</div>
<my-element>Hello from content</my-element>
<!-- If the script is just an empty main, it's OK to include inline. -->
<!-- Otherwise, put the app into a separate .dart file. -->
<script type="application/dart">main() {}</script>
</body>
</html>
Notice the #host block in the style:
#host {
my-element {
display: block;
border: 1px solid black;
}
}
Because this particular custom element does not extend any element, it does not default to a block.
Here is what it looks like when styled:
I have a problem that the text inside the content-div is scrollable. Happens on iOS 6 with iPhone 4 and only if native title is set.
Video: http://www.youtube.com/watch?v=8ARaDQzBqOM
Demo:
<!DOCTYPE html>
<html>
<head>
<script>
forge.topbar.setTitle('Test App', function() {
forge.logging.log("Topbar image set");
}, function(e) {
forge.logging.log("Topbar image error: " + e);
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<p>this text is scrollable</p>
</div>
</div>
</body>
</html>
You might want to try to reset all the margins, paddings and border for all elements using CSS. Add this right before the closing </head>:
<style type="text/css">
* { /* reset */
margin: 0;
padding: 0;
border: 0;
}
</style>