<jsbar-code> SO answer

by WebComponents

HTML

<jsbar-code value="210169"></jsbar-code>
<jsbar-code value="12312023" fontSize="21"></jsbar-code>
<jsbar-code format="upc" value="123456789012" textmargin="0" fontoptions="bold"></jsbar-code>
<jsbar-code format="pharmacode" lineColor="#0aa" width="4" height="40" value="21" displayValue="0"></jsbar-code>

<script>
  document.head.append(
    Object.assign(document.createElement("script"), {
      src: "//cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js",
      onload: () => {
        customElements.define(
          "jsbar-code",
          class extends HTMLElement {
            connectedCallback() {
              this.attachShadow({mode:"open"}).innerHTML = `<svg></svg>`;
              let attr = (x) => this.getAttribute(x) || "";
              let options = { // default options
                format: "CODE128",
                displayValue: attr("displayValue") != "0",
                height: 25,
                width: 1,
                fontSize: 16,
                lineColor: attr("lineColor") || "black"
              };
              Array.from(this.attributes,({nodeName,nodeValue}) => options[nodeName] = nodeValue);
              JsBarcode(this.shadowRoot.querySelector("svg"), options.value, options);
            }
          }
        );
      }
    }))
</script>