Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
DartBot opened this issue Apr 11, 2014 · 14 comments
Closed

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

DartBot opened this issue Apr 11, 2014 · 14 comments
Assignees
@jakemac53
Labels
area-pkg Used for miscellaneous pkg/ packages not associated with specific area- teams.

Comments

@DartBot
Copy link

DartBot commented Apr 11, 2014

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
Copy link
Contributor

Added Area-Polymer, Triaged labels.

@DartBot
Copy link
Author

DartBot commented May 12, 2014

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

There are concerns that it?

@jmesserly
Copy link

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

@sigmundch
Copy link
Member

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

@sigmundch
Copy link
Member

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

@sigmundch
Copy link
Member

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

@sigmundch
Copy link
Member

Added PolymerMilestone-Next label.

@sigmundch
Copy link
Member

Removed Polymer-Milestone-Next label.

@DartBot
Copy link
Author

DartBot commented Jul 20, 2014

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>

<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

@jakemac53
Copy link
Contributor

Set owner to @jakemac53.
Added Started label.

@jakemac53
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

fixed in r39707

Added Fixed label.

@DartBot DartBot added Type-Defect area-pkg Used for miscellaneous pkg/ packages not associated with specific area- teams. labels Aug 29, 2014
@sigmundch sigmundch mentioned this issue Jun 5, 2015
Closed
@DartBot DartBot mentioned this issue Jun 5, 2015
Closed
@DartBot
Copy link
Author

DartBot commented Jun 5, 2015

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

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jakemac53 jakemac53

Labels
area-pkg Used for miscellaneous pkg/ packages not associated with specific area- teams.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sethladd @jakemac53 @jmesserly @sigmundch @DartBot