Child Element not picking up styles in Chrome Extension

[inu...@gmail.com]

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?

[inu...@gmail.com]

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.