CODEWITHSUNDEEP
javascriptgoogle-chromepolymer
user3785380
user3785380

Reputation: 1

Polymer <content> not working on Chrome?

My Polymer Web Components work on both Firefox and Safari as expected; However, in Google Chrome, the rendering of the content tag overwrites the rest of the template in the custom element. 

<polymer-element name="semantic-ui-button" attributes="type settings">
<template>      
<template if="{{ type == 'animated' }}">
    <div class="ui animated {{settings.attributes}} {{settings.animation}} button">
    <content>
          <div id="visibleContent" class="visible content"></div>
          <div id="hiddenContent" class="hidden content"></div>
    </content>
    </div>
</template>
....
</template>
</polymer-element>

When you create an element:

<semantic-ui-button type="animated">
    <div class="visible content">
        Face 1
    </div>
    <div class="hidden content">
        Face 2
    </div>
</semantic-ui-button>

The result is:

    <div class="visible content">
        Face 1
    </div>
    <div class="hidden content">
        Face 2
    </div>

Instead of:

<div class="ui animated {{settings.attributes}} {{settings.animation}} button">
    <div class="visible content">
        Face 1
    </div>
    <div class="hidden content">
        Face 2
    </div>
</div>

Why is the content not being wrapped inside the rest of the template?

Upvotes: 0

Views: 553

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

Under native ShadowDOM, projected elements (those selected by <content></content>) are only projected into the render tree.

When you examine the DOM in inspector, the elements will not appear to have moved at all. This concept allows the developer to have a consistent view of the DOM (children are not vacuumed up into ShadowDOM, they stay where you put them).

Under the ShadowDOM Polyfill, JavaScript sees the correct logical version of the DOM, but developer tools reflect the composed dom. In other words, lacking the ability to directly affect the render tree, the ShadowDOM Polyfill instead uses the native DOM tree as the render tree, and constructs a virtualized DOM that it presents as the API.

And here is a bit of an easter-egg in Polymer: if you open a console and type sinspect(), it should open a new window with a simple DOM inspector that should reflect the (correct) logical DOM. Whether this works or not depends on your platform, and you may have to 'allow' a pop-up window.

Upvotes: 1

Related Questions