diff --git a/README.md b/README.md index c8ef649..dc5d2ae 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # <enlighted-link> -> Custom element to enlight your ``s from Shadow DOM to the Light. +> Custom element to enlighten your ``s from Shadow DOM to the Light. By current spec [HTML Imports do not work in Shadow DOM](https://github.com/w3c/webcomponents/issues/628). That makes it hard to import definitions of custom elements that you use in a shadow root. This element allows you to do that. You could import your dependencies exactly where and when you need them. @@ -56,6 +56,17 @@ The element forwards [`link` element's content attributes](https://dev.w3.org/ht - sizes - title +## Properties + +Property | Options | Default | Description +--- | --- | --- | --- +`link` | *HTMLLinkElement* | | The reference to created `` element. `null` if not yet created. Please note, that `link` element can be disconnected from document tree when `` is disconnected. + +## Events + +The element forwards following events from created ``: +- `load`, +- `error` ## [Contributing and Development](CONTRIBUTING.md) diff --git a/enlighted-link.html b/enlighted-link.html index 7296aa3..2827779 100644 --- a/enlighted-link.html +++ b/enlighted-link.html @@ -14,7 +14,17 @@ ] } connectedCallback(){ - const link = this.link = this.link || document.createElement('link'); + const forwardEvent = (oldEvent)=>{ + this.dispatchEvent(new oldEvent.constructor(oldEvent.type, oldEvent)); + } + let link; + if(this.link){ + link = this.link; + } else { + link = this.link = document.createElement('link'); + link.addEventListener('load', forwardEvent); + link.addEventListener('error', forwardEvent); + } for(let attrNo = 0, len = this.attributes.length; attrNo < len; attrNo++){ link.setAttribute(this.attributes[attrNo].name, this.attributes[attrNo].value); diff --git a/test/attributes.html b/test/attributes.html index 8761ac5..89bf427 100644 --- a/test/attributes.html +++ b/test/attributes.html @@ -30,7 +30,7 @@ enlightedLink = shadowHost.shadowRoot.querySelector('enlighted-link'); }); afterEach(function() { - shadowHost.remove(); + shadowHost.parentNode && shadowHost.parentNode.removeChild(shadowHost); }); it('should attach `link` element with same attributes to the document\'s head', function() { diff --git a/test/events.html b/test/events.html new file mode 100644 index 0000000..c3ec0d7 --- /dev/null +++ b/test/events.html @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + diff --git a/test/index.html b/test/index.html index 263794d..a120f9c 100644 --- a/test/index.html +++ b/test/index.html @@ -19,7 +19,8 @@ 'spec.html', 'added-in-shadow.html', 'attributes.html', - 're-attached.html' + 're-attached.html', + 'events.html' ]); diff --git a/wct.conf.json b/wct.conf.json index c565c22..5b0f648 100644 --- a/wct.conf.json +++ b/wct.conf.json @@ -10,8 +10,7 @@ "platform": "Windows 10" }, { "browserName": "safari", - "platform": "OS X 10.11", - "version": "10" + "platform": "OS X 10.13" }] } }