A Web Component for investigating what can be done using the <slot />
in web components.
General usage example:
<script type="module" src="slot-fun.js"></script>
<slot-fun>
<button>Button</button>
</slot-fun>
Example using a fallback method:
<script type="module" src="slot-fun.js"></script>
<slot-fun>
<button>Button</button>
<a href="#">Anchor</a>
</slot-fun>
<style>
slot-fun:not(:defined) button,
slot-fun:defined a {
display: none;
}
</style>
Example using options or additional fallback method:
<script type="module" src="slot-fun.js"></script>
<slot-fun attribute="value">
<button>Button</button>
</slot-fun>
<style>
slot-fun[attribute="value"] {
outline: 1px solid red;
}
</style>
This Web Component allows you to:
- Check for…
You have a few options (choose one of these):
- Install via npm:
npm install @bigandy/slot-fun
- Download the source manually from GitHub into your project.
- Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
Make sure you include the <script>
in your project (choose one of these):
<!-- Host yourself -->
<script type="module" src="slot-fun.js"></script>
<!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://www.unpkg.com/@bigandy/slot-fun@1.0.0/slot-fun.js"
></script>
<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@bigandy/slot-fun@1.0.0"></script>
With thanks to the following people:
- Zach Leatherman for inspiring this Web Component repo template