A Web Component for…
General usage example:
<script type="module" src="component-name.js"></script>
<component-name>
<button>Button</button>
</component-name>Example using a fallback method:
<script type="module" src="component-name.js"></script>
<component-name>
<button>Button</button>
<a href="#">Anchor</a>
</component-name>
<style>
component-name:not(:defined) button,
component-name:defined a {
display: none;
}
</style>Example using options or additional fallback method:
<script type="module" src="component-name.js"></script>
<component-name attribute="value">
<button>Button</button>
</component-name>
<style>
component-name[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 @daviddarnes/component-name - 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="component-name.js"></script><!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://www.unpkg.com/@daviddarnes/component-name@1.0.0/component-name.js"
></script><!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://esm.sh/@daviddarnes/component-name@1.0.0"
></script>With thanks to the following people:
- Zach Leatherman for inspiring this Web Component repo template
