1. Word count in textarea

        <custom-element>
            <form>
                <label>
                    <textarea slice="text-container">Hello world!</textarea>
                    <span> Word count:
                        {string-length(//slice/text-container/text())}
                    </span>
                </label>
            </form>
        </custom-element>
    

2. Word count in HTML input field

        <custom-element>
            <form>
                <label>
                    <input type="text" value="Type time update" slice="txt" slice-update="keyup">

                    <span> Character count:
                        <b> {string-length(//slice/txt)} </b>
                    </span>
                    <span> Word count:
                        <b> {string-length(normalize-space(//slice/txt)) -
                            string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1} </b>
                        <!-- The expression first normalizes the string by removing leading and trailing whitespace and
                            collapsing internal whitespace into a single space. It then subtracts the length of the string
                            with all spaces removed from the length of the original string,
                            and adds 1 to account for the last word.
                        -->
                    </span>

                </label>
                <p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
            </form>
        </custom-element>