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'
]);