Skip to content
This repository has been archived by the owner on Dec 19, 2017. It is now read-only.

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

Closed
DartBot opened this issue Jun 5, 2015 · 13 comments
Closed

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

DartBot opened this issue Jun 5, 2015 · 13 comments
Labels
bug PolymerMilestone-Next Priority-Medium

Comments

@DartBot
Copy link

DartBot commented Jun 5, 2015

Originally opened as dart-lang/sdk#18171

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.
@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/5479?v=3" align="left" width="48" height="48"hspace="10"> Comment by sethladd

Added Area-Polymer, Triaged labels.

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

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

There are concerns that it?

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="48" height="48"hspace="10"> Comment by jmesserly

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

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

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

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

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

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

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

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

Added PolymerMilestone-Next label.

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

Removed Polymer-Milestone-Next label.

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/3486855?v=3" align="left" width="48" height="48"hspace="10"> Comment 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>

<link rel="import" href="packages/polymer/polymer.html">

<!-- parent element -->
<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>

<!-- child element -->
<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>

<script type="application/dart">export 'package:polymer/init.dart';</script>

</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

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/984921?v=3" align="left" width="48" height="48"hspace="10"> Comment by jakemac53

Set owner to @jakemac53.
Added Started label.

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/984921?v=3" align="left" width="48" height="48"hspace="10"> Comment by jakemac53

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.

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/984921?v=3" align="left" width="48" height="48"hspace="10"> Comment by jakemac53

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.

@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

<img src="https://avatars.githubusercontent.com/u/984921?v=3" align="left" width="48" height="48"hspace="10"> Comment by jakemac53

fixed in dart-lang/sdk@0eb4fe6

Added Fixed label.

@DartBot DartBot closed this as completed Jun 5, 2015
This was referenced Jun 5, 2015
Closed
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug PolymerMilestone-Next Priority-Medium
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jakemac53 @DartBot