feat: allow to pass options to insert function through style.use()

Allow to pass additional parameter to `style.use(anything)` which will be passed to `insert` function. This allows to insert each tag in different places and especially useful for Shadow DOM

Resolves webpack-contrib#328

README.md

@@ -540,6 +540,46 @@ module.exports = {
 
 Insert styles at top of `head` tag.
 
+You can pass any parameters to `style.use(anythingHere)` and this value will be passed to `insert` function.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          {
+            loader: "style-loader",
+            options: {
+              insert: function insertIntoTarget(element, options) {
+                var parent = options.target || document.querySelector("head");
+                parent.appendChild(element);
+              },
+            },
+          },
+          "css-loader",
+        ],
+      },
+    ],
+  },
+};
+```
+
+Insert styles to the provided element or to the `head` tag if target isn't provided. Now you can inject styles into Shadow DOM (or any other element).
+
+**component.js**
+
+```js
+import style from "./file.css";
+
+style.use({
+  target: document.querySelector('#myShadowDom').shadowRoot,
+})
+```
+
 ### `styleTagTransform`
 
 Type: `String | Function`

src/index.js

@@ -125,7 +125,8 @@ ${getInsertOptionCode(insertType, options)}
 options.domAPI = ${getdomAPI(isAuto)};
 options.insertStyleElement = insertStyleElement;
 
-exported.use = function() {
+exported.use = function(insertOptions) {
+  options.insertOptions = insertOptions || {};
   if (!(refs++)) {
     update = API(content, options);
   }

src/runtime/insertStyleElement.js

@@ -4,7 +4,7 @@ function insertStyleElement(options) {
 
   options.setAttributes(style, options.attributes);
 
-  options.insert(style);
+  options.insert(style, options.insertOptions);
 
   return style;
 }