CWML is brand-new JavaScript micro-framework to extend HTML and add support for defining custom reactive tags. Micro-framework takes only 3kb and doesn't requires any compilation.
CWML 2.0 is here - CWML2
- Copy code of src/cwml.min.js
- Create file cwml.min.js in your project dist folder
- Write
<script src="dist/cwml.min.js"></script>in your .html page
If you need to basically register new tag for your HTML page:
<my-tag>Hello World Tag!</my-tag>
<script src="dist/cwml.min.js"></script>
<script>
cwml.init();
cwml.registerTag(
$tag = 'my-tag'
);
</script>NOTE: place your <script> tag at bottom of the <body>
If you need to add support of custom attributes to your tag:
<my-tag my-attribute="some value">Hello World Tag!</my-tag>
<script src="dist/cwml.min.js"></script>
<script>
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = {
'my-attribute': function(el,oldVal,newVal) {
console.log('my-attribute was changed to ' + newVal + '!');
}
}
);
</script>Also you can add event-handling to your tag.
Event will be handled for every instance of your tag, you can get handled instance by el argument.
You can handle every html event and also cwml events:
__init__event (When tag was initialized/registered)__added__event (When tag element was added to document)__removed__event (When tag element was removed from document)__adopted__event (When tag element was moved/adopted by another element in document)
Example of click event handling:
<my-tag>Hello World Tag!</my-tag>
<script src="dist/cwml.min.js"></script>
<script>
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = {},
$events = {
click: function(el) {
console.log('my-tag was clicked!');
}
},
);
</script>If you need to define style of the element you can use $props to set css properties of the tag. Example:
<my-tag>Hello World Tag!</my-tag>
<script src="dist/cwml.min.js"></script>
<script>
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = {},
$events = {},
$props = {
'color': 'red',
'background-color': 'black'
}
);
</script>Also you can define inner HTML of your tag aka template of the tag. That template of tag is defined by specifying $content attribute. You can receive attributes of element with {name-of-attribute} and initial inner with {inner}. Example:
Example:
<my-tag my-attribute="some value">My initial inner</my-tag>
<script src="dist/cwml.min.js"></script>
<script>
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = {}, // we dont have to specify attributes if we dont need to observe them
$events = {},
$props = {},
$content = `
<h1>{inner} (Attribute value:{my-attribute})</h1>
`
);
</script>Content of custom tag works fine and my-attribute value assigned. But what if we wil change my-attribute dynamicly? - Content will not update. That's because our tag isn't reactive, but you can make it reactive! Example:
<my-tag my-attribute="some value">My initial inner</my-tag>
<script src="dist/cwml.min.js"></script>
<script>
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = ['my-attribute'], // specify attributes, they will be observed
$events = {},
$props = {},
$content = `
<h1>{inner} (Attribute value:{my-attribute})</h1>
`
);
</script>Also CWML allows you to register attributes for existing HTML tags, example:
<h1 my-attribute="some value">Some header</h1>
<script src="dist/cwml.min.js"></script>
<script>
cwml.init();
cwml.registerAttr(
$query = 'h1', // what elements will support that tag (css-like query)
$attr = 'my-attribute',
$callback = function(el,newVal) {
console.log('my-attribute value was changed to ' + newVal);
},
);
</script>| Feature | Chrome | Firefox | Safari | Opera | Edge | IE | Android WebView |
|---|---|---|---|---|---|---|---|
| Custom tags | v66+ | v63+ | v10.1+ | v53+ | v79+ | - | v66+ |
But you can use web-components polyfill also.