Polymer 1.0: How to create distributed nodes using @apply?

Question

Polymer 1.0: How to create distributed nodes using @apply?

We have a custom element that makes an AJAX call to fetch some html generated on the server side and then injected into its light dom via Polymer.dom (this) .innerHTML. The response coming from the server has another custom element in it that provides a CSS property for theming purposes. On the main page, we set the property value, but it doesn't work. How to get Polymer to create dynamically added light DOM elements that are propagated by another element.

index.html

<style is="custom-style">
  x-bar {
    --mixin-property: {
      background: red;
    };
  }
</style>
...
<body>
  <x-baz>
  </x-baz>
</body>

x-baz.html

<dom-module id="x-baz">
  <template>
    <x-foo></x-foo>
  </template>
</dom-module>
<script>
  Polymer({
    is: "x-baz"
  });
</script>

x-foo.html

<dom-module id="x-foo">
  <template>
    <iron-ajax auto url="..." last-response="{{response}}"></iron-ajax>
    <content></content>
  </template>
</dom-module>
<script>
  Polymer({
    is: "x-foo",
    properties: {
      response: {
        type: String,
        obeserver: 'responseChanged'
      }
    },
    responseChanged: function(newVal) 
      Polymer.dom(this).innerHTML = newVal;
    }
  });
</script>

x-bar.html

<dom-module id="x-bar">
  <style>
    .elementToStyle {
      @apply(--mixin-property);
    }
  </style>
  <template>
    <div class="elementToStyle">
      ...
    </div>
  </template>
</dom-module>
</script>
  Polymer({
    is: "x-bar"
  });
</script>

Iron-ajax request returns <x-bar> ... </x-bar>

.

I would expect the div inside the x-bar returning from the AJAX response to have a red background, but it doesn't seem to work. What do we need to tweak to make this work correctly?

Thanks in advance!

+3

polymer polymer-1.0

Jim simon June 12. 15 at 14:57

source to share