An opinionated template for creating a custom element.

Overview

<custom-element> element

An opinionated template for creating a custom element.

Installation

You can install <custom-element> with npm, Yarn or pnpm.

npm install custom-element-element
# or
yarn add custom-element-element
# or
pnpm install custom-element-element

Usage

Import the custom element in your JavaScript bundle:

import 'custom-element-element';

Then use the custom element in your HTML:

<custom-element></custom-element>

Development

This project uses Vite, a build tool that "aims to provide a faster and leaner development experience for modern web projects." The tests are ran using the Playwright Test test runner, which makes it easy to test custom elements in multiple browsers.

To set up your development environment, run the following command to install dependencies:

npm install

Run the following command to view your changes live in the browser:

npm start

When you want to run the tests, run:

npm test

License

MIT

You might also like...

little-planet Custom Element: interactive panorama viewer

little-planet This project is a Custom HTML Element (AKA Web Component) that renders an interactive view of a panoramic photo. Can be used with no J

Nov 25, 2022

A custom element that aims to make it easier to embed Spring '83 boards

spring-board element A custom element that makes it simple to embed Spring '83 boards! Usage If you are using spring-board in a client-side framew

Jan 1, 2023

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.

A powerful, flexible, Markdown-based authoring framework. Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and

Jan 2, 2023

jQuery Terminal Emulator - JavaScript library for creating web-based terminals with custom commands

jQuery Terminal Emulator - JavaScript library for creating web-based terminals with custom commands

JavaScript Library for Web Based Terminal Emulators Summary jQuery Terminal Emulator is a plugin for creating command line interpreters in your applic

Jan 1, 2023

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq-custom-files custom.js and custom.css utilities for Logseq. current version v20220331 query table view : add handles on the query table headers

Dec 7, 2022

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Paranoia 💊 Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden dat

Dec 29, 2022

Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan with 3

Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan with <3

Gutpress(WordPress Gutenburg Block Plugin) Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan w

Nov 23, 2022

Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨

solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .

Nov 27, 2022

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

Oct 23, 2022
Owner
Ryan Murphy
Now @themarshallproject, previously @datadesk + @texastribune
Ryan Murphy
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This experimental library patches the global custom elements registry to allow re-defining or reload a custom element.

Redefine Custom Elements This experimental library patches the global custom elements registry to allow re-defining a custom element. Based on the spe

Caridy Patiño 21 Dec 11, 2022
Kuldeep 2 Jun 21, 2022
🚀 Battle-tested Next.js TypeScript Prisma template with an opinionated architecture. 🔋 Included ™️

?? The Ultimate Next.js Starter Pack Next.js ^12 + TypeScript + Prisma + Chakra UI starter packed with useful development features. I've adopted indus

Nam 7 Dec 10, 2022
A Tauri + Next.js (SSG) template, with TailwindCSS, opinionated linting, and GitHub Actions preconfigured

Tauri + Next.js Template This is a Tauri project template using Next.js, bootstrapped by combining create-next-app and create tauri-app. This template

Kevin Xiao 58 Dec 30, 2022
JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

Boyleing Point 5 May 13, 2021
A custom element for rendering stylable (light DOM) Markdown

Motivation There are many web components these days to render Markdown to HTML. Here are a few: <zero-md> <marked-element> …and I’m sure many others H

Lea Verou 252 Dec 20, 2022
📜 A tiny custom element for all your scrollytelling needs!

<scroll-scene> element A tiny custom element for all your scrollytelling needs! The successor to @newswire/scroller. Key features ?? Less than 700 byt

Ryan Murphy 17 Dec 6, 2022
A custom element that helps save alienated player API's to bring back their true inner HTMLMediaElement API

A custom element that helps save alienated player API's to bring back their true inner HTMLMediaElement API

Wesley Luyten 5 Oct 14, 2022