diff --git a/prism-highlighter.html b/prism-highlighter.html
index 0458466..3e52895 100644
--- a/prism-highlighter.html
+++ b/prism-highlighter.html
@@ -15,9 +15,24 @@
Syntax highlighting via [Prism](http://prismjs.com/).
Place a `` in your document, preferably as a direct child of
-``. It will listen for `syntax-highlight` events on its parent element,
+``.
+
+For shadow Dom support, make sure to import the html file with the theme:
+
+```
+
+```
+and include the call the style:
+
+```
+
+```
+
+It will listen for `syntax-highlight` events on its parent element,
and annotate the code being provided via that event.
+A `prism-highlighter-highlight-event-registered` event will be fired when the event listener is registered on the page.
+
The `syntax-highlight` event's detail is expected to have a `code` property
containing the source to highlight. The event detail can optionally contain a
`lang` property, containing a string like `"html"`, `"js"`, etc.
@@ -41,9 +56,15 @@
ready: function() {
this._handler = this._highlight.bind(this);
},
-
+/**
+* Fired right after the syntax-highlight event listener is registered on the page.
+* this event signifies the prism-element is ready to intercept any highlight events.
+*
+* @event prism-highlighter-highlight-event-registered
+*/
attached: function() {
(this.parentElement || this.parentNode.host).addEventListener(HIGHLIGHT_EVENT, this._handler);
+ this.fire('prism-highlighter-highlight-event-registered');
},
detached: function() {
diff --git a/test/prism-element.html b/test/prism-element.html
index 98bd0db..72f5b63 100644
--- a/test/prism-element.html
+++ b/test/prism-element.html
@@ -155,6 +155,20 @@
});
});
});
+
+ suite('Prism Highlighter fires a "prism-highlighter-highlight-event-registered" event ', function() {
+ var eventObj;
+
+ suiteSetup(function(){
+ document.addEventListener('prism-highlighter-highlight-event-registered',function(evt){
+ eventObj = evt.detail;
+ });
+ });
+
+ test('impSVG fixture is created', function() {
+ assert.isDefined(eventObj, 'event is defined');
+ });
+ });