Getting Started
Installation
shell
npm install light-pen
# If supporting older browsers
npm install element-internals-polyfill
NPM Usage
JavaScript
// entrypoint.js
import "element-internals-polyfill"; // Optional polyfill for ElementInternals() for older browsers.
import "light-pen";
CDN usage
HTML
<script type="module">
import "https://esm.run/element-internals-polyfill";
import "https://esm.run/light-pen";
// Loading a version range. This will load the latest >= 3 and < 4 of light-pen.
import "https://esm.run/light-pen@^3.0.0";
// Loading a specific version. This will only load v3.0.0
import "https://esm.run/light-pen@3.0.0";
</script>
HTML
<!-- Your HTML file -->
<light-pen>
<script type="text/plain" slot="html">
<!-- HTML -->
</script>
<script type="text/plain" slot="css">
<!-- CSS -->
</script>
<script type="text/plain" slot="js">
<!-- JS -->
</script>
</light-pen>
Polyfills
This library makes use of ElementInternals
For additional components and how to use them, check out their component pages.