inject element's styles at the end of the ShadowRoot children

[trusktr]

otherwise the following will fail if styles are prepended:

        template = html`
            <!-- Element styles are currently prepended here. -->

            <!-- import a lib, f.e. bootstrap. -->
            <link rel="stylesheet" href="./lib.css" />

            <!-- Because lib.css ends up *after* element styles, element styles do not override lib styles. -->
            <div class="lib-btn"></div>
        `

Current workaround is to define styleRoot where styles will be appended:

        #styleRoot = document.createElement('div')

        get styleRoot() {
            return this.#styleRoot
        }

        template = html`
            <!-- import a lib, f.e. bootstrap. -->
            <link rel="stylesheet" href="./lib.css" />

            <!-- Element styles are prepended here in the styleRoot. -->
            ${this.styleRoot}

            <!-- Styles work as expected, element styles overrode lib styles. -->
            <div class="lib-btn"></div>
        `

PR:

• https://github.com/lume/element/pull/13

[trusktr]

Related, once we implement

• https://github.com/lume/element/issues/1

then the problem is solved in that case because adopted style sheets behave similar to styles appended to the end of ShadowRoot.