Add insertInto option

ahstro · ahstro · commit 28d8144a7e9a · 2016-07-13T17:45:20.000+02:00
Add another option - called `insertInto` - which allows specifying a CSS
selector - e.g. `#styles` - to be used as an argument to
`document.querySelector` to find an element into which to insert the
generated `&lt;style&gt;`-tags.
Will default to the `&lt;head&gt;`-tag if undefined.
diff --git a/README.md b/README.md
@@ -47,9 +47,12 @@ Note: Behavior is undefined when `unuse`/`unref` is called more often than `use`
 
 ### Options
 
+#### `insertInto`
+By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else, e.g. into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), you can specify a CSS selector for that element here, e.g. `require('../style.css?insertInto=#host::shadow>#root')`.
+
 #### `insertAt`
 
-By default, the style-loader appends `<style>` elements to the end of the `<head>` tag of the page. This will cause CSS created by the loader to take priority over CSS already present in the document head. To insert style elements at the beginning of the head, set this query parameter to 'top', e.g. `require('../style.css?insertAt=top')`.
+By default, the style-loader appends `<style>` elements to the end of the style target, which is the `<head>` tag of the page unless specified by `insertInto`. This will cause CSS created by the loader to take priority over CSS already present in the target. To insert style elements at the beginning of the target, set this query parameter to 'top', e.g. `require('../style.css?insertAt=top')`.
 
 #### `singleton`
 
diff --git a/addStyles.js b/addStyles.js
@@ -13,8 +13,18 @@ var stylesInDom = {},
 	isOldIE = memoize(function() {
 		return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
 	}),
-	getHeadElement = memoize(function () {
-		return document.head || document.getElementsByTagName("head")[0];
+	getStyleTarget = (function(fn) {
+		var memo = {};
+		return function(selector) {
+			if (typeof memo[selector] === "undefined") {
+				console.log("FOO1memo", selector)
+				memo[selector] = fn.call(this, selector);
+			}
+			console.log("FOO2memo", selector)
+			return memo[selector]
+		}
+	})(function (styleTarget) {
+		return document.querySelector(styleTarget)
 	}),
 	singletonElement = null,
 	singletonCounter = 0,
@@ -30,7 +40,10 @@ module.exports = function(list, options) {
 	// tags it will allow on a page
 	if (typeof options.singleton === "undefined") options.singleton = isOldIE();
 
-	// By default, add <style> tags to the bottom of <head>.
+	// By default, add <style> tags to the <head> element
+	if (typeof options.insertInto === "undefined") options.insertInto = "head";
+
+	// By default, add <style> tags to the bottom of the target
 	if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
 
 	var styles = listToStyles(list);
@@ -100,19 +113,22 @@ function listToStyles(list) {
 }
 
 function insertStyleElement(options, styleElement) {
-	var head = getHeadElement();
+	var styleTarget = getStyleTarget(options.insertInto)
+	if (!styleTarget) {
+		throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
+	}
 	var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
 	if (options.insertAt === "top") {
 		if(!lastStyleElementInsertedAtTop) {
-			head.insertBefore(styleElement, head.firstChild);
+			styleTarget.insertBefore(styleElement, styleTarget.firstChild);
 		} else if(lastStyleElementInsertedAtTop.nextSibling) {
-			head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
+			styleTarget.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
 		} else {
-			head.appendChild(styleElement);
+			styleTarget.appendChild(styleElement);
 		}
 		styleElementsInsertedAtTop.push(styleElement);
 	} else if (options.insertAt === "bottom") {
-		head.appendChild(styleElement);
+		styleTarget.appendChild(styleElement);
 	} else {
 		throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
 	}
