Fixes PolymerElements#26

Firing event when highlight event listener is registered If you place prism highlighter in another component, there's no way to know when the highlight event listener is registered, resulting in a possible race condition - highlight events being sent out before the event listener is even registered. By firing a (prism-highlighter-highlight-event-registered) event after the listener is registered, the host can listen for the fired event, and act accordingly. I've also improved shadow dom documentation, and added references to how to make shadow dom work.
runn-vermel · Oct 13, 2016 · 2861960 · 2861960
1 parent 5f74221
commit 2861960
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/prism-highlighter.html b/prism-highlighter.html
@@ -15,9 +15,24 @@
 Syntax highlighting via [Prism](http://prismjs.com/).
 
 Place a `<prism-highlighter>` in your document, preferably as a direct child of
-`<body>`. It will listen for `syntax-highlight` events on its parent element,
+`<body>`. 
+
+For shadow Dom support, make sure to import the html file with the theme:
+
+```
+<link rel="import" href="bower_components/prism-element/prism-theme-default.html">
+```
+and include the call the style:
+
+```
+<style is="custom-style" include="prism-theme-default"></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
@@ -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');
+    });
+  });
     </script>
   </body>
 </html>