Is the content element used in Polymer 1.0?

2019-07-17 14:00发布

问题:

https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-distribution

In the above link under "Dom Distribution" it says:

To support composition of an element's light DOM with its local DOM, Polymer supports the <content> element. ...

Just wondering if this is out of date? Does Polymer 1.0 use slots as described here?

https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#composition_slot

回答1:

It's definitely working in Polymer 1.0, even with Shadow DOM; I'm currently using it in my projects which use Polymer 1.6, but it may be outdated in Polymer 2.0 or a newer version.

@ebidel confirmed that they will add the slots to webcomponents.js, but currently nobody is assigned to it: https://github.com/webcomponents/webcomponentsjs/issues/430

UPDATE

In the Polymer 1.7 they introduced the <slot> element for preparing to upgrade to 2.0 wich should be released soon. The 2.0 will not have the <content> element because they switching to the CustomElement v1 spec. I recommend that if you are plan to use <content> element then switch it to slot so in the future you will able to just upgrade the polymer library without heavy migrating.

The slot is working a bit different, the slot does not have a selector:

<dom-module id="my-element">
    <template>
        <slot name="content"></slot>
    </template>
    <script>
    Polymer({
        is: 'my-element'
    });
    </script>
</dom-module>

<my-element>
    <div slot="content">My Content</div>
</my-element>