Introduction

This project is an experiment to define web components in a declarative way. It introduces the new tag <component> to HTML.

Imagine you can define a web component like this:

<component name="awesome-alert" extends="p">
  <style>
    p {
      color: #FFF;
      background-color: #3778e5;
      border-radius: 6px;
      padding: 5px 15px;
    }
    p[success] { background-color: green; }
  </style>
</component>
<awesome-alert>awesome box!</awesome-alert>
<awesome-alert success>success box!</awesome-alert>

Result:

awesome box!

success box!

The example above shows us:

we can declarative define a new custom element using <component> tag;
we can style elements inside a component without affecting the same elements outside.
we can inherit template and styles from other elements using extends attribute.

That's great because now we can create small components just for styling pourpose. We can see this phenomenon in style-components community. People are making small components just for styling pourpose and making templates more readable.

tag-components are not just for slyling. In fact, it also support template and script, but none of them are required:

<component name="badge-number" extends="span">
  <template>
  </template>
  <style>
  </style>
  <script>
  </script>
</component>

Installing

Are you interesting in using this? Just add this Polyfill in the <head> of your HMTL, like this:

 <head>
  <script src="https://unpkg.com/tag-components@0.1.2/component-polyfill.js"></script>
 </head>

PS: we will use the words components and custom elements interchangeably in this website.

Result:#

Installing#

Result:

Installing