It turns out this was Dart specific. I modified the Polymer core_element
core_toolbar.dart from this:
library core_elements.core_toolbar;
import 'dart:html';
import 'dart:js' show JsArray;
import 'package:web_components/interop.dart' show registerDartType;
import 'package:polymer/polymer.dart' show initMethod;
import 'package:core_elements/src/common.dart' show DomProxyMixin;
class CoreToolbar extends HtmlElement with DomProxyMixin {
CoreToolbar.created() : super.created();
}
@initMethod
upgradeCoreToolbar() => registerDartType('core-toolbar', CoreToolbar);
To:
library core_elements.core_toolbar;
import 'package:polymer/polymer.dart';
@CustomTag('core-toolbar')
class CoreToolbar extends PolymerElement {
CoreToolbar.created() : super.created();
}
And the issue went away. Don't know why though.
On Thursday, July 3, 2014 5:04:55 PM UTC-7, [email protected] wrote:
>
> 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 custom element:
>
> <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. The
> styles associated with is parent element, <core-scroll-header-panel> are
> applied.
>
> 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/297eb060-2e92-4483-9adc-0d140de25a4b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
