Signup for the Ionic Newsletter to get the latest news and updates!

  • http://janpiotrowski.de/ Jan Piotrowski

    I don’t get the “Slot” paragraph. What are slots? What does the code example there do?

    • Mike Hartington

      Slots are basically Angular’s way of doing content projection or the older transclusion API. You can keep a “slot” or spot in a components HTML open and let the users say what should go in there. Given this example

      https://gist.github.com/mhartington/0778298a63fb1b476ac9a5627ea327a1

      We have a default slot (one with no name), and a named slot (start). By doing this, we can pass content into the component with the default slot, and render other content in the “start” slot, but have it work in any order.

      Also, take a look at the MDN docs as well
      https://developer.mozilla.org/en-US/docs/Web/API/Element/slot

      • http://janpiotrowski.de/ Jan Piotrowski

        So this is a new thing for people coming from Ionic v3, and is one of the useful features web components provide via Shadow DOM?

        • Ian Luca

          Not a new thing, because angular already had it, and ionic v3 was using it. Difference is that ionic v4 uses the native implementation

          • Mike Hartington

            Yeah, it was already around in V3, when ever you did `item-start` or `item-end` for ion-items. The main point is that instead of using attribute selectors, the native slot API can be used, and devs do not needed to know about the details happening under the hood

    • RhysC

      Think of slots as props but for web components. Its just a way of passing arguments to a component.

      • Ian Luca

        It’s not arguments, its html tags that will be rendered inside the component somewhere.
        Props/attributes are the way to pass arguments, like booleans, objects, arrays, etc.

    • Flawyte

      Suppose you’re creating a <page-layout> component, and that you want to be able to pass to this component a footer element, a header element and a content element, and having them automatically laid out with the header at the page’s start and the footer at its end. This what using your component would look like at first :


      <page-layout>
      <div class="Header"></div>
      <main></main>
      <footer></footer>
      </page-layout>

      Now the question is: How do you tell your <page-layout> element which child is the header, which is the footer and which is the page’s content? The answer is <slot>-s :


      <page-layout>
      <header slot="header"></header>
      <main slot="content"></main>
      <footer slot="footer"></footer>
      </page-layout>

      and in your component’s DOM :


      <template>
      <div style="display: flex; flex-direction: column;">
      <slot name="header"></slot>
      <slot name="content"></slot>
      <slot name="footer"></slot>
      </div>
      </template>

      This article on Google Developers might help too : https://developers.google.com/web/fundamentals/web-components/shadowdom#composition_slot

  • Davo

    Thx for the article 🙂 I don’t get something regarding isolated styles and CSP. May I ask then, is it correct, using shadow-dom I will have to add a `sha-….` value in the style-src rules of my CSP for each and every single isolated component I’ve built with a custom style, is that correct? does that makes sense?

    I’ve got like 100 pages/components, that would be kind of a job…

    Thx in advance for any feedbacks
    David

    P.S.: Same question there https://forum.ionicframework.com/t/shadow-dom-and-csp-style-src

    • Mike Hartington

      Replied on the forum! TLDR; you should be fine with just one setting on the index.html

  • Adrien

    Hello @mhartington:disqus thanks for the article,

    I just tried V4 and while it’s awesome if i’m correct for the menu I cannot juste override .menu-inner class via CSS ?
    The question is then, how do we change the background color of the menu background ?

    Thanks

    • mongedecristo

      then CSS: #menu-content { background-color: map-get($colors, baseColorNameYouSetInVariablesScss); } That’s how easy it is to change the background color of a side menu.

      • Adrien

        I’ll try that, and thanks for the help