How to style distributed nodes in Dart Polymer

StackOverflow https://stackoverflow.com/questions/20704066

  •  20-09-2022
  •  | 
  •  

Question

I'm trying to style distributed nodes in Dart Polymer with no luck. I'm using the example at:

http://www.polymer-project.org/articles/styling-elements.html#style-distributed

as a starting point. However, I can't even get that working once ported to Dart. Here is my code:

<polymer-element name="test-element">
  <template>
    <style>
      content[select="p"]::content * { /* anything distributed here */
        font-weight: bold;
      }
      /* @polyfill p:first-child */
      ::content p:first-child {
        color: red;
      }
      /* @polyfill footer > p */
      ::content footer > p {
        color: green;
      }
      /* @polyfill :host > p */
      ::content > p { /* scope relative selector */
        color: blue;
      }
    </style>
    <content select="p"></content>
    <content></content>
  </template>
  <script type="application/dart" src="testelement.dart"></script>
</polymer-element>

.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="testpolymer.css">

    <!-- import the test-element -->
    <link rel="import" href="testelement.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <h1>TestPolymer</h1>

    <p>Hello world from Dart!</p>

    <test-element>
        <p>I'm red and bold</p>
        <p>I'm blue and bold</p>
        <footer>
            <p>I'm also red</p>
            <p>I'm green</p>
            <span>I'm black</span>
        </footer>
    </test-element>

  </body>
</html>

The output has no styling applied and is just black text for everything. Any ideas what I'm doing wrong?

Was it helpful?

Solution

polymer-elements polymer-flex-layout / polymer-flex-layout.css still use 

::-webkit-distributed(p) {
  color: red;
}

which also works in my recent version of Dartium. I have no idea when the new selectors take effect.

Other polymer-elements that make use of this selector but have recently switched to ::content

  • polymer-ui-field
  • polymer-ui-menu-item
  • polymer-ui-nav-arrow
  • polymer-ui-pages
  • polymer-ui-sidebar
  • polymer-ui-toolbar

You can browse the history to find the previous webkit-distributed selector examples.

I guess they use Chromium which may be a little ahead of Dartium.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top