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

notwaldorf · Aug 6, 2015

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):

notwaldorf · Aug 8, 2015

@sorvell a++ great straw man

sorvell was assigned by notwaldorf Aug 6, 2015

sorvell added the p1 label Aug 6, 2015

sorvell closed this issue from a commit Aug 8, 2015

sorvell Fixes #2218: match style properties against scope transformed selecto… …
…r (not property unique selector)
c9e9062

sorvell closed this in c9e9062 Aug 8, 2015

sorvell referenced this issue Aug 8, 2015
Open
Custom style properties can be incorrect when composing elements of the same type #2230

Polymer/polymer

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

Labels

Milestone

Assignee

2 participants

Custom style properties can be incorrect when composing elements of the same type #2230