Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow template syntax for slots #121

Merged
merged 8 commits into from
May 27, 2018

Conversation

dennisbaskin
Copy link

This PR adds the following functionality (notes taken from docs):

Using Template Tags

To use template tags to add content without necessitating the need for an element wrapper, you can follow the following pattern:

<template slot id="header">My Content</template>

You would need to add the slot attribute (not a vue-slot) and provide an id attribute that matches the name of the slot you wish to add content to.

Passing Custom Elements Inside Slots

When passing custom elements inside of slots, you may get errors that warn about Unknown custom element. There are two ways around this.

  1. Add your custom element to a list of ignored elements in the vue config:

    Vue.config.ignoredElements.push('my-custom-element')
    
  2. Make sure the elments being inserted into another element are created as custom elements first:

       Vue.customElement('custom-child-one', CustomChildOne)
       Vue.customElement('custom-child-two', CustomChildTwo)
       
       Vue.customElement('custom-parent', CustomParent)
    
      <custom-parent>
        <template slot id="some-id">
          <custom-child-one></custom-child-one>
          <custom-child-two></custom-child-one>
        </template>
      </custom-parent>
    

@dennisbaskin
Copy link
Author

Referencing issue: #118

@karol-f
Copy link
Owner

karol-f commented May 24, 2018

Thanks, will look at it soon!

@karol-f karol-f merged commit 3aef23e into karol-f:master May 27, 2018
karol-f added a commit that referenced this pull request May 27, 2018
karol-f added a commit that referenced this pull request May 27, 2018
@karol-f
Copy link
Owner

karol-f commented May 27, 2018

Released in @3.1.0 (https://github.com/karol-f/vue-custom-element/releases/tag/v3.1.0). Thanks for the PR!

@dennisbaskin
Copy link
Author

Thank you! 😸

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants