component-template
component-name
A Web Component for…
| Demo | Further reading |
Examples
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>
Features
This Web Component allows you to:
- Check for…
Installation
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)
Usage
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>
Credit
With thanks to the following people:
- Zach Leatherman for inspiring this Web Component repo template