3
Slots in Custom Web Components
source link: https://dev.to/liamkirkland/slots-in-custom-web-components-5fgd
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Liam Kirkland
Posted on Oct 26
Slots in Custom Web Components
During development of any custom web component, slots can be extremely useful. Slots allow for use to pass in HTML into different parts of our card.
Below we see the cards we are trying to replicate.
Slots are ultimately useful in structuring a custom element. While our group is still trying to fully utilize slots in our component, we see the benefits of the structure they provide. We are on our way to properly using slots to their fullest.
render() {
return html`
<div class="cardWhole">
<div class="cardHeader">
<slot name="top-header"></slot>
<slot name="bottom-header></slot>
</div>
<div class="cardBody">
<p> content body </p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
`;
}
Enter fullscreen modeExit fullscreen mode
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK