I'm working on creating a Chrome DevTool Extension in Polymer and Dart
(this post is not Dart specific). I'm attempting to use the Polymer
core_element and have the following:
<polymer-element name="test">
<template>
<style>
.title {
font-size: 40px;
}
</style>
<core-scroll-header-panel condenses keepCondensedHeader
on-core-header-transform="{{onCoreHeaderTransform}}">
<core-toolbar class="tall">
<div class="bottom indent title">Title</div>
</core-toolbar>
<div content>
<p>This is the content</p>
</div>
</core-scroll-header-panel>
</template>
<script type="application/dart" src='test.dart'></script>
</polymer-element>
It looks and works fine if I load the page directly in Dartium (Chrome).
However when I load the page as a Chrome Extension, it does not look fine.
The issue is that the styles declared by the child polymer element
<core-toolbar> in its core_toolbar.css are not being applied.
core_toolbar.css, defines a rule:
:host(.tall) {
height: 192px;
}
I see that the core_toolbar.css is loaded but the style rule :host(tall) is
not applied, nor any of the styles defined by core_toolbar.css. I also
tried including the style directly into the template, but no luck.
Is there some restriction in Chrome Extensions associated with styles for
polymer child elements?
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/07a776ea-e641-42c3-ac80-8a8feeff9f29%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
