<nav-pager> Web Component

UNLicensed source-code on GitHub

<nav-pager id="PAGER_ONE">

    LOAD:
    <script src="https://nav-pager.github.io/element.min.js">
    
    USE:
    <nav-pager>
        <nav>Page 1</nav>
        <nav>Page 2</nav>
        <nav>Page 3</nav>
        <nav>Page 4</nav>
        <nav>Page 5</nav>
    </nav-pager>

<nav-pager id="PAGER_TWO">

<nav-pager id="PAGER_TWO" pagelabel="Paginas: ">
<nav title="Foo">Page 1</nav>
<nav title="Bar" selected>Page 2</nav>
<nav title="Baz">Page 3</nav>
</nav-pager>

<style>
/* style parts IN shadowDOM */
#PAGER_TWO {
&::part(pagenr) {
background: lightblue;
        opacity: 0.5;
    }
    &::part(pagenrselected) {
    opacity: 1;
    background: green;
    color: white;
    }
    &::part(selectorbottom) {
    display: none;
    }
    }
</style>

(my) in depth blogs and explanations:

<nav-pages> minified GZIP Filesize is small