import custom <style> tag to Shadow DOM

this small but powerful addition allows a user of the element to define
a custom <style> element inside of the custom element, which is then
moved in to the Shadow DOM. The <style> tag can define arbitrary CSS of
course, but the main (and supported) way of using it is to override CSS
variables to customize the styling of the element.

Example:

<ge-autocomplete …>
	<style>
	  :host {
	    --input-bg: salmon;
	    --loading-color: red;
	  }
	</style>
</ge-autocomplete>

Author: mxlje

src/index.js

@@ -130,9 +130,22 @@ class GEAutocomplete extends HTMLElement {
   }
 
   connectedCallback () {
+    this.importStyles()
     this.render()
   }
 
+  // importStyles looks for a specific template tag inside the custom element
+  // and moves its content (expected to be a <style> tag) inside the Shadow DOM,
+  // which can be used to customize the styling of the component.
+  importStyles() {
+    const styles = this.querySelector('style')
+    if (styles === null) return
+
+    // appending the node somewhere else _moves_ automatically it so we don’t have
+    // to explicitly remove it
+    this.shadowRoot.appendChild(styles)
+  }
+
   render () {
     ReactDOM.render(
       <WebComponent {...this.props} host={this} />,