The superfast way to custom elements.

Installation

• via NPM

  $ npm i -g teddytags

• Use

  • Just write your imaginary HTML:

  <loader>
    <icon src="assets/loader.png"></icon>
    <text>Loading your awesome app...</text>
  </loader>

  • Make a defintions file (say, tags.js) like this:

  import { TeddyTags } from "https://cdn.jsdelivr.net/npm/teddytags@latest?module";
  new TeddyTags("loader").set("div");
  new TeddyTags("icon").set("img");
  new TeddyTags("text").set("h1");

  • Add the file in your HTML like this (just make sure it loads after the document is ready):

  <script src="./tags.js" defer></script>

  • The output in your browser:

  <div id="loader">
    <img id="icon" src="assets/loader.png" />
    <p id="text">Loading your awesome app...</p>
  </div>

CONTRIBUTING

We love contributions from the open-source community! If you are interested in contributing to this lovely preoject, submit a Pull Request right now. The Pull Request should:

• Should pass all the tests made by the author
• Should not hamper with the functioning of the code ( i.e making the code unrunnable)

We are happilty accepting contributions for our website for this project, teddy.js.org

For more information, check out the CONTRIBUTING.md file in this repository.

Common issues

Q : DOM manipulation not working

A : If your DOM manipulation scripts are in a file (say, event.js), then try adding the file below your tag definitions file with the defer attribute like this :

<!-- The tag defintions file -->
<script src="./tags.js" defer></script>
<!-- The DOM manipulation file -->
<script src="./event.js" defer></script>

For a working example, go to this gist.