Content selectors in templates not considered

[garoyeri]

In reference to issue #27

If a template's <content> element has the select attribute, the content is not remapped correctly it seems.

I am using angular 4.3.3, origami 1.3.0-beta.1, and am integrating with the Predix UI controls here (www.predix-ui.com). What I found specifically was the <px-card> element that doesn't remap properly.

This is what we should be putting in our code:

<px-card header-text="Card">
  <div class="actions">
    Actions
  </div>
  <p>This is the main content area of a Predix card.</p>
</px-card>

And it should resolve to:

<px-card header-text="Card" class="x-scope px-card-0">
  <header class="flex flex--middle flex--justify style-scope px-card">
    <div class="epsilon caps style-scope px-card" id="headerText">
      <template is="dom-if" class="style-scope px-card"></template>Card
    </div>
    <div class="actions">
      Actions
    </div>
  </header>
  <div class="contents  style-scope px-card"> 
    <p>This is the main content area of a Predix card.</p>
  </div>
  </px-card>

But, instead, it resolves to:

<px-card _ngcontent-c0="" class="x-scope px-card-0" header-text="Card">
  <header class="flex flex--middle flex--justify style-scope px-card">
    <div class="epsilon caps style-scope px-card" id="headerText">
      <template is="dom-if" class="style-scope px-card"></template>Card
    </div>
  </header>
  <div class="contents  style-scope px-card">
  </div>
  <div _ngcontent-c0="" class="actions">
    Actions
  </div>
  <p _ngcontent-c0="">This is the main content area of a Predix card.</p>
</px-card>

I suspect that other components that use this strategy have similar problems. Or am I missing a workaround that is already in place?

Here's the link on what selectors can be used: Creating Insertion Points using the Select Attribute

[hotforfeature]

It looks like that component is a Polymer 1.x component, it hasn't been upgraded to a Polymer 2.x hybrid component yet. One of the changes from 1.x to 2.x is the <content> tag has been replaced with <slot>.

I'd check to see if that library is working on an upgrade to 2.x/1.x hybrid mode, or open a PR if they're not. If that isn't an option and you need to use this library, you may check out angular-polymer for Angular and 1.x support.

[garoyeri]

You are correct, these are using Polymer 1.9.x. I completely missed (several times) that Origami is specifically for Polymer 2.0+. However, I am using Angular 4.x currently and Angular CLI 1.2.2. It seems I've hit a gap here. I'll do some testing on angular-polymer and see if it'll work for me. And if I can get the Predix UI folks to upgrade, much the better.

Thanks, I'll close this issue and try out angular-polymer.