Pass in label to support the shadow DOM

README.md

@@ -48,6 +48,9 @@ require('time-input-polyfill/auto');
 
 // ES6
 import 'time-input-polyfill/auto';
+
+// TypeScript
+import * as timePolyFill from 'time-input-polyfill';
 ```
 
 That's all you need to do.
@@ -128,6 +131,29 @@ if (!supportsTime) {
 
 This will add a global `TimePolyfill` function to the page.
 
+## Shadow DOM
+
+When your code is inside a component that resides in the Shadow DOM, the polyfill will not be able to find your label
+element. For this case, you can pass your label element in directly.
+
+```
+<label id="myLabel" for="timeInput></label>
+<input type="time" id="timeInput">
+```         
+
+```               
+import timePolyfill from 'time-input-polyfill';
+
+someMethod() {
+  // The following element must not be in a shadow DOM
+  var componentRootElem = document.getElementById('idOfYourShadowDomComponentRootElement');
+
+  var timeLabelElem = componentRootElem.shadowRoot.getElementById('myLabel');
+  var timeInputElem = componentRootElem.shadowRoot.getElementById('timeInput');
+  timePolyFill(timeInputElem, timeLabelElem);
+}
+```
+
 ## Major limitations
 
 Note that I refer to an `input[type="time"]` element that has had the polyfill initialized on it as an `$input` in this section.

index.js

@@ -10,7 +10,7 @@ import create_a11y_block from './core/accessibility/create_a11y_block'
 var accessibility_block_created = false
 var $a11y
 
-function TimePolyfill($input) {
+function TimePolyfill($input, $label) {
 	$input.setAttribute('autocomplete', 'off')
 
 	// Prevent screen reader from announcing the default stuff
@@ -21,7 +21,7 @@ function TimePolyfill($input) {
 		accessibility_block_created = true
 	}
 
-	var label = get_label($input)
+	const label = $label ? $label.textContent : get_label($input)
 
 	$input.polyfill = {
 		$a11y: $a11y,