HTMLPLUS

JavaScript

HTMLPLUS web components are fully compatible with JavaScript. To utilize web components in your JavaScript application follow these steps.

You can utilize HTMLPLUS simply by adding a simple scirpt in your main html like this.

<!DOCTYPE html>
<html>
  <head>
    <title>HTMLPLUS in JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="https://unpkg.com/@htmlplus/core"></script>
  </head>
  <body>
    <plus-switch></plus-switch>
  </body>
</html>

type="module" just works on the modern browsers. it's not compatible with "IE 11" or "Edge 12-18".

You can use these two examples to set properteis and attributes to web components.

<plus-switch reverse></plus-switch>
or
<plus-switch reverse="true"></plus-switch>

All Standard JavaScript APIs are supported. Feel free to use them.

<plus-switch id="element"></plus-switch>
<script>
  element.reverse = true;
</script>

To add event to components you can use this format.

<plus-switch id="element"></plus-switch>
<script>
  element.addEventListener('plusChange', () => {
    alert('plusChange event fired!');
  })
</script>

Most of events such as click and change, etc. are prereserved by explorers. To avoid conflict occuring you need to use "plus" prefix.
Prev
Why HTMLPLUS?
Next
Browser support