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.

Sign up for GitHub

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

Shady dom scrimshawing problems if a custom property is missing #2218

Closed
notwaldorf opened this issue Aug 6, 2015 · 1 comment
Closed

Shady dom scrimshawing problems if a custom property is missing #2218

notwaldorf opened this issue Aug 6, 2015 · 1 comment
Assignees
@sorvell
Labels
p1

Comments

@notwaldorf
Copy link
Contributor

TL; DR: if a custom element uses a custom property that doesn't exist, other styles using custom properties that follow it won't get applied (in Chrome).

Custom element:

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
</style>
<dom-module id="simple-element">
  <style>
    paper-icon-button {
      color: var(--ghost-property-doesnt-exist);
      --iron-icon-width: 10px;    /* doesn't get applied */
      --iron-icon-height: 10px;   /* doesn't get applied */
      margin-left: 10px;          /* applied */
    }
  </style>
  <template>
      <paper-icon-button icon="bug-report"></paper-icon-button>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'simple-element'
  });
</script>

Usage:

<!doctype html>
<html>
<head>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="simple-element.html">
</head>
<body>
  <simple-element></simple-element>
  <simple-element></simple-element>
  <simple-element></simple-element>
</body>
</html>

Result in Chrome (they should all be the same size, but they're not. They're fine in Safari & Firefox):
screen shot 2015-08-06 at 3 39 26 pm
@sorvell sorvell added the p1 label Aug 6, 2015
@sorvell sorvell closed this as completed in c9e9062 Aug 8, 2015
@notwaldorf
Copy link
Contributor Author

@sorvell a++ great straw man 😉

@sorvell sorvell mentioned this issue Aug 8, 2015
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sorvell sorvell

Labels
p1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sorvell @notwaldorf