Polymer 0.10.0-pre.8 extends dom element custom style no effect #18171

DartBot · 2014-04-11T18:39:22Z

This issue was originally filed by joo.ts...@gmail.com

follow example show button font color red.

<!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="import" href="packages/polymer/polymer.html">
  </head>
  <body>
    <polymer-element name="x-button" extends="button" noscript>
      <template>
        <style>
          :host {
            color: red;
          }
        </style>
        <content></content>
      </template>
    </polymer-element>

    <button is="x-button">test</button>

</body>
</html>

follow example show button font color normal(gray).

<!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="import" href="packages/polymer/polymer.html">
  </head>
  <body>
    <polymer-element name="x-button" extends="button">
      <template>
        <style>
          :host {
            color: red;
          }
        </style>
        <content></content>
      </template>
      <script type="application/dart;component=1">
        import 'dart:html';
        import 'package:polymer/polymer.dart';

        @CustomTag('x-button')
        class XButton extends ButtonElement with Polymer, Observable {
          XButton.created(): super.created() {
            polymerCreated();
          }
        }
      </script>
    </polymer-element>

    <button is="x-button">test</button>

</body>
</html>

noscript meet expectations, has script do not meet expectations.

sethladd · 2014-04-14T20:10:41Z

Added Area-Polymer, Triaged labels.

DartBot · 2014-05-12T09:36:05Z

This comment was originally written by joo...@gmail.com

There are concerns that it?

jmesserly · 2014-05-31T00:13:10Z

Removed Area-Polymer label.
Added Pkg-Polymer, Area-Pkg labels.

sigmundch · 2014-07-01T20:47:48Z

Added this to the 1.6 milestone.
Removed Priority-Unassigned label.
Added Priority-Medium label.

sigmundch · 2014-07-08T01:56:30Z

Removed this from the 1.6 milestone.
Added Polymer-P-1 label.

sigmundch · 2014-07-09T00:08:39Z

Removed Polymer-P-1 label.
Added Polymer-Milestone-Next label.

sigmundch · 2014-07-09T00:10:46Z

Added PolymerMilestone-Next label.

sigmundch · 2014-07-09T00:11:03Z

Removed Polymer-Milestone-Next label.

DartBot · 2014-07-20T12:46:37Z

This comment was originally written by @almstrand

This may not be specific to extending DOM elements as I was able to confirm the behaviour when extending custom elements using Polymer Dart 0.12.0-dev (Jul 11, 2014) and Dart SDK version 1.5.3. It also seems this issue occurs only in certain browsers. I previously reported this behaviour on Stack Overflow: http://stackoverflow.com/questions/24835686/custom-parent-elements-style-not-applied-to-child

I created a custom Polymer Dart element that extends another custom element. The parent element has a style defined containing a :host selector. When adding the parent element to the DOM, the style is applied as expected.

When extending the parent element and adding the child element to the DOM, the style defined for the parent element is not always applied. When testing the following code in Dartium v36.0.1985.97 (280598) or Chrome v35.0.1916.153, both elements are displayed with the proper style applied. When tested in Firefox 28.0 and Chrome v34.0.1847.116 Ubuntu 14.04 aura (260972), only the parent element has the style applied.

pubspec.yaml:

name: myapp
dependencies:
polymer: ">=0.12.0-dev <0.12.0"
transformers:

polymer:
entry_points: index.html

index.html:

<!DOCTYPE html>

<html>
<head>
    <title>index</title>
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
</head>

<body>

<polymer-element name="my-parent">
    <template>
        <style>
        :host {
            background:red;
        }
        </style>
        <content></content>
    </template>
</polymer-element>
<script type="application/dart" src="my-child.dart"></script>

<polymer-element name="my-child" extends="my-parent">
</polymer-element>
<script type="application/dart" src="my-parent.dart"></script>

<p><my-parent>RED? (parent elment)</my-parent>
<p><my-child>RED? (child element)</my-child>

</body>
</html>

Output in Dartium v36.0.1985.97 (280598) and Chrome v35.0.1916.153: http://s30.postimg.org/8j3x3l2m9/Dartium.png

Output in Firefox 28.0 and Chrome v34.0.1847.116 Ubuntu 14.04 aura (260972): http://s1.postimg.org/f210lwhj3/Firefox.png

jakemac53 · 2014-08-29T15:36:11Z

Set owner to @jakemac53.
Added Started label.

jakemac53 · 2014-08-29T16:05:09Z

This looks like a bug with the ShadowDom CSS polyfill. The style gets translated to effectively:

my-parent {
background: red;
}

But extended elements do not get the same treatment, it should be the following (or some equivalent):

my-parent, my-child {
background: red;
}

The weird thing though is I can confirm that making them noscript elements does in fact fix the issue. This leads me to believe it has something to do with polymer.dart specifically, not the polyfill itself. I am going to see if I can get a repro at all on the JS side of things.

jakemac53 · 2014-08-29T17:10:55Z

Looks like we had an optimization to not call the shadowdom css shim if there is no template present, but it wasn't taking into account the parent element. I just sent out https://codereview.chromium.org/524673002/ to remove this optimization, this is now consistent with the JS side of things as well.

jakemac53 · 2014-08-29T18:29:10Z

fixed in r39707

Added Fixed label.

DartBot · 2015-06-05T23:04:55Z

This issue has been moved to dart-archive/polymer-dart#163.

DartBot added Type-Defect area-pkg Used for miscellaneous pkg/ packages not associated with specific area- teams. labels Aug 29, 2014

DartBot assigned jakemac53 Aug 29, 2014

sigmundch mentioned this issue Jun 5, 2015

SDK and Editor 1.4 .0dev_06_05 polymer element extends dom style problem #18833

Closed

DartBot mentioned this issue Jun 5, 2015

Polymer 0.10.0-pre.8 extends dom element custom style no effect dart-archive/polymer-dart#163

Closed

This issue was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Polymer 0.10.0-pre.8 extends dom element custom style no effect #18171

Polymer 0.10.0-pre.8 extends dom element custom style no effect #18171

DartBot commented Apr 11, 2014

sethladd commented Apr 14, 2014

DartBot commented May 12, 2014

jmesserly commented May 31, 2014

sigmundch commented Jul 1, 2014

sigmundch commented Jul 8, 2014

sigmundch commented Jul 9, 2014

sigmundch commented Jul 9, 2014

sigmundch commented Jul 9, 2014

DartBot commented Jul 20, 2014

jakemac53 commented Aug 29, 2014

jakemac53 commented Aug 29, 2014

jakemac53 commented Aug 29, 2014

jakemac53 commented Aug 29, 2014

DartBot commented Jun 5, 2015

Polymer 0.10.0-pre.8 extends dom element custom style no effect #18171

Polymer 0.10.0-pre.8 extends dom element custom style no effect #18171

Comments

DartBot commented Apr 11, 2014

sethladd commented Apr 14, 2014

DartBot commented May 12, 2014

jmesserly commented May 31, 2014

sigmundch commented Jul 1, 2014

sigmundch commented Jul 8, 2014

sigmundch commented Jul 9, 2014

sigmundch commented Jul 9, 2014

sigmundch commented Jul 9, 2014

DartBot commented Jul 20, 2014

jakemac53 commented Aug 29, 2014

jakemac53 commented Aug 29, 2014

jakemac53 commented Aug 29, 2014

jakemac53 commented Aug 29, 2014

DartBot commented Jun 5, 2015