I have been working with Dodson's example overlay code from polycast 47
<http://polycasts/ep47-app-route-fouc/blog/elements/blog-pages.html> and
hitting weird problems. I finally tracked it down: shadow dom vs shady dom.
Consider this element:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import"
href="../../bower_components/paper-button/paper-button.html">
<dom-module id="hide-test-app">
<template>
<style>
:host {
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #FFF;
}
</style>
<paper-button on-tap="work" raised>Press me</paper-button>
<div class="overlay" hidden$="[[!working]]">
I am the overlay.
</div>
</template>
<script>
Polymer({
is: 'hide-test-app',
properties: {
working: {
type: Boolean,
value: false
},
},
work: function() {
this.working = true;
}
});
</script>
</dom-module>
Which is loaded in a very simple wrapper:
<!doctype html>
<html>
<head>
<title>hide-test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<script
src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/src/hide-test-app/hide-test-app.html">
</head>
<body>
<hide-test-app></hide-test-app>
</body>
</html>
Click the button, see the overlay. No problem.
However, reload the page with ?dom=shadow (or set the global polymer flag
before loading webcomponents-lite), and the overlay is shown first, even
though "working" is false.
I am not completely fluent in the shadow/shady dom features, and so it was
not clear to me if this is a defect or a grave misunderstanding on my part:
hence, my posting here rather than opening an issue on github. What do you
think, reader? Is this a defect that should be filed on github, or a defect
in my understanding?
This was all tested on Chrome Version 51.0.2704.106 (64-bit) for Linux, in
case that's relevant.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/b2cc69d3-b950-4c84-b30a-f8d2d4a7fe07%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
