uppercase-first-word.html

<template id="uppercase_first_tpl">
    <style>
        .uppercase-first {
            text-transform: capitalize;
        }
    </style>
    <span class="uppercase-first"></span>
    <span></span>
</template>
<script type="module">
    class UppercaseFirstWordElement extends HTMLElement {
        connectedCallback() {
            this.attachShadow({mode: 'open'});
            const tpl = document.getElementById('uppercase_first_tpl');
            this.shadowRoot.appendChild(tpl.content.cloneNode(true));
            const innerText = this.textContent.trim().split(' ');
            this.textContent = '';
            this.shadowRoot.querySelector('.uppercase-first').innerText = innerText[0];
            this.shadowRoot.querySelector('span:last-child').innerText = innerText.slice(1).join(' ');
        }
    }
    customElements.define('uppercase-first-word', UppercaseFirstWordElement);
</script>