HTML5 Custom Elements Collection

<num-counter counter-step="1"></num-counter>
<num-counter counter-step="5"></num-counter>
<num-counter counter-step="25"></num-counter>

<!-- hh:mmm:ss -->
<digital-clock></digital-clock>
<!-- hh:mm -->
<digital-clock clock-seconds="false"></digital-clock>

<!-- numerical date -->
<current-date></current-date>
<!-- show as a localized string -->
<current-date date-string="true"></current-date>
<!-- use a timestamp -->
<current-date date-string="true" date-timestap="1231231231"></current-date>

<modal-window modal-accept="Sure!" modal-cancel="Naaah" modal-background="true">
    <strong>Hi! This is a modal.</strong>
    <p>Here, you can write anything you want 
    your users to know before proceeding forward.</p>
    <em>Maybe answer some questions as well?</em>
</modal-window>

let myModal = document.getElementsByTagName("modal-window")[0];

// Add callback functions to the buttons (accept, cancel)
myModal.defineCallbacks(
    function () {
        console.log("modal-window: 'OK'");
    },
    function () {
        console.log("modal-window: 'cancel'");
    }
);

// Test button
document.getElementById("open-modal-window")
    .addEventListener("click", function () {
        myModal.showModal();
    });

<image-preview></image-preview>

// Accessing the input file:
let myImagePreview = document.getElementsByTagName("image-preview")[0];
let inputFile = myImagePreview.file;

<placeholder-div 
    data-url="https://baconipsum.com/api/?type=all-meat&paras=1&format=html"
    data-delay="500"
    data-paragraphs="3"
    data-line-min="3" 
    data-line-max="6">
</placeholder-div>

<placeholder-img
    data-placeholder="low-res.jpg"
    data-src="full-size.png"
    data-delay="1000"
    data-transition="1000">
</placeholder-img>

placeholder-img {
    display: block;
    width: 300px;
    height: 300px;
    background-color: rgb(204,204,204); /* just as a fallback */
    border-radius: 50px;
}

<tooltip-wrapper original-text="Please don't hover over me. I'm hiding something...">
    <strong>Oh no ...</strong>
    <br>I'm revealed!
</tooltip-wrapper>

<!-- tooltip with a bit more HTML -->
<em>Important</em> 
<tooltip-wrapper original-text="<img src='/assets/info.png' style='width:20px;'>">
    <strong>Wow!</strong>
    <p>This information is <em>soooo</em> important! Glad I didn't miss this ...</p>
    <strong>Wait!</strong> there's more!
    <p>... or is there?</p>
    <table style="text-align: center">
        <!-- bla bla table html -->
    </table>
</tooltip-wrapper>

NOTE: this element is a bit messy and will be refactored later.

<textarea-autosize 
    autosize-width="100%"
    autosize-height="30px"
    autosize-max-height="300px">
    Express your thoughts ...
</textarea-autosize>

<img-carousel img-background="#112" img-size="cover" img-transition="400">
    <img src="https://picsum.photos/1000/600?image=10" img-caption="First slide" hidden>
    <img src="https://picsum.photos/1000/450?image=12" img-caption="Second slide" hidden>
    <img src="https://picsum.photos/1000/300?image=14" img-caption="Last slide, go backwards!" hidden>
</img-carousel>

<a href="https://developers.google.com/web/fundamentals/web-components/" target="_blank" is="confirm-link">Click me to travel far away!<a>

<input type="text" is="history-input">

<!-- NOTE: this element is NOT self-closing! -->
<input-switch></input-switch>

<!-- use the familiar checked and disabled attributes -->
<input-switch checked></input-switch>
<input-switch disabled></input-switch>
<input-switch disabled checked></input-switch>

/* set the color attribute
to change the active color */
input-switch { 
    color: rgb(78, 218, 78); 
}

let mySwitch = document.getElementByTagName("input-switch")[0];

// Use getters and setters
mySwitch.disabled = true;                   // -> true
console.log(mySwitch.checked);              // -> true
mySwitch.checked = false;                   // -> false

// Or use getAttribute(), setAttribute() and removeAttribute()
mySwitch.setAttribute("checked", "true");   // -> "true"
mySwitch.getAttribute("disabled");          // -> "true"
mySwitch.removeAttribute("disabled");

<modal-window browser-modal-window="Sure!" modal-cancel="Naaah" modal-background="true">
                <strong>Hi! This is a modal.</strong>
                <p>Here, you can write anything you want 
                your users to know before proceeding forward.</p>
                <em>Maybe answer some questions as well?</em>
            </modal-window>

let myModal = document.getElementsByTagName("modal-window")[0];

// Add callback functions to the buttons (accept, cancel)
myModal.defineCallbacks(
    function () {
        console.log("modal-window: 'OK'");
    },
    function () {
        console.log("modal-window: 'cancel'");
    }
);

// Test button
document.getElementById("open-modal-window")
    .addEventListener("click", function () {
        myModal.showModal();
    });