Disqus comments don't work in a polymer custom element

Question

I don\'t know how to make a disqus comments code to work inside of my custom elements.

Structure of my site:

| index.html
--------\\

Answer 1

I wanted to give another possible solution to using Disqus comments in Polymer. The main problem is the inability to use Disqus with elements in the shadow dom because they are hidden. So how can we make a shadow dom element visible? We can pass it down the component hierarchy from the index.html of the application.

To expose an element structure your html like this:

index.html
<polymer-app>
  <div id="disqus_thread">
</polymer-app>

In Polymer App:

<dom-module id="polymer-app">
  <template>
      <slot></slot>
  <template>
</dom-module>

Slot is where the #disqus_thread will show. And you can pass it further down to other components, inside polymer-app.

<dom-module id="polymer-app">
  <template>
    <my-page>
      <slot></slot>
    </my-page>
  <template>
</dom-module>

Note: This is code is just an example. Don't try to copy and paste, it won't run.

Answer 2

The error is due to the fact that the disqus library can't find the <div id="disqus_thread"> element.

It's because this element is inside a Shadow DOM (and that's why it works fine in Firefox which doesn't implement real Shadow DOM).

3 possible solutions:

1. Don't use Shadow DOM with your Polymer elements.
2. Don't put the #disqus_thread element in a Polymer element (insert it in the normal DOM).
3. Use <content> in your <template>, and the #disqus_thread element inside the polymer tag to make it availabe to the library:

In the custom elements:

<template>
   //HTML code here
   <content></content>
</template>

In the HTML page where you insert the custom element:

<my-app>
   <my-testView>
      <div id="disqus_thread"></div>
   </my-testView>
</my-app>

The <div> will be revealed at the place where the (nested) <content> tags are placed.