Slots like you haven't seen them before...cause I have never seen slots before in HTML. Never worked with slots or named slots. First time for everything, right?
Slots
What is a tag? A quick internet search reveals...slot machines. Note to self, <slot> means nothing to Google. According to MDN Web Docs
"The HTML elementโpart of the Web Components technology suiteโis a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together."
Word jumble. Essentially, instead of using a property for text content, you can use a<slot>tag. Take this line of HTML for example.
<div id="content">${this.bodyContent}</div>
And in the tag...
<demo-code bodyContent="I read you"></demo-code>
It works in this example since our string is relatively small, and only a string. But if we want other HTML tags within the bodyContent, then we run into many issues. To get around this, we use slots.
<div id="content">${this.bodyContent}</div>
Then becomes
<div slot="content"><slot></slot></div>
And our tag becomes...
<demo-code>I read you</demo-code>
Or, more complex...
<demo-code> <a href='https://lifelinegame.fandom.com/wiki/Lifeline'>I read you</a> </demo-code>
With slots, we can inject valid HTML code into our Web Component. But this is an unnamed slot, what about if we have multiple pieces of content we want to inject into our element?
NAMED SLOTS
THAT'S RIGHT, YOU HEARD IT HERE LAST. NAMED SLOTS. Sorry, caps lock. To used named slots, we have to use <span> tags. Once again from MDN Web Docs,
"The HTML element is a generic inline container for phrasing content, which does not inherently represent anything."
"It's a tag, big whoop." I can hear people say, or maybe that's just the ringing in my ears. Spans aren't very different from divs, that is, until you combine them with slots. Take our code for example.
<learning-card type="science"><span slot='header'>Header content TEST</span><span slot='subheader'>SUBHEADER TESTING</span>We're trying multi slotted content</learning-card>
More specifically...
<span slot='header'>Header content TEST</span>
The inner HTML of the span tag get passed to the slot tag within the element. From our element source file
<h2 slot="header"><slot name="header"></slot></h2>
The named slot takes in the data from the span element and "replaces" the inner HTML of the heading tag. In essence, the above code block then becomes...
<h2 slot="header">Header content TEST</h2>
It is possible to also read data using the slot property. The above code block uses this to reference another element. It reads the data from above with the following line of HTML.
<slot name="header"></slot>
It then renders the header tag in the element to be displayed. Two methods; tags with a slot property, or span tags with names.
Advantages over properties
- Properties need to be updated whenever they are changed via lifecycle hooks. Slots update automatically
- Less code overall
Disadvantages
- Properties are definitely much easier to understand.
- Cannot use slots outside of HTML (to my knowledge)
GitHub Stuff
learning-card
Top comments (0)