Un1 Un1 - 2 months ago 10
Javascript Question

Disqus comments don't work in a polymer custom element

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

Structure of my site:



|
index.html


--------\
my-app.html
(custom element)

----------------\
my-testView.html
(custom element)

----------------\
my-testView2.html
(custom element)


I need to put disqus comments inside
my-testView.html
and
my-testView2.html


Structure of
index.html
:



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


Structure of
my-app.html
:



<iron-pages>
<my-testView name="testView"><content></content></my-testView>
<my-testView2 name="testView2"><content></content></my-testView2>
</iron-page‌​s>


Structure of
my-testView.html
and
my-testView2.html
:



<template>
<content></content>
</template>


The disqus div



I put the div of the disqus comments inside
<my-app>
on the
index.html
so that chrome could find it. It can't find it if I put it inside
<my-testView>
like that:

page
my-app.html


<iron-pages>
<my-testView name="testView"><div id="disqus_thread"></div></my-testView>
<my-testView2 name="testView2"><div id="disqus_thread"></div></my-testView2>
</iron-page‌​s>


because the my-app.html is a custom element itself and it won't let chrome to find it. So I had to put it outside of the shadow dom (the
index.html
page)

Script code on the pages
my-testView.html
and
my-testView2.html
look like this:



<dom-module id="my-testView">
<template>
...
<content></content>
...
</template>

<script>
Polymer({
is: 'my-testView',

ready: function ()
{
// DEFAULT DISQUS CODE (I changed real URLs though):
var disqus_config = function () {
this.page.url = 'https://www.example.com/testView'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '/testView';
// this.page.title = 'Test View';
};

(function() {
var d = document, s = d.createElement('script');
s.src = '//myChannelName.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
}
});
</script>
</dom-module>


Result



So the
<div id="disqus_thread"></div>
basically passing through the
<content></content>
of the
my-app.html
to
<content></content>
of the
my-testView.html
but it's NOT appearing on BOTH the
my-testView.html
and
my-testView2.html
. Do I have to put
id
to
<content>
in some specific way? It doesn't help if I just add
id
s like that:

my-app.html:

<iron-pages>
<my-testView name="testView"><content id="test1"></content></my-testView>
<my-testView2 name="testView2"><content id="test2"></content></my-testView2>
</iron-page‌​s>


my-testView.html:

<content id="test1"></content>


my-testView2.html:

<content id="test2"></content>


It won't send the
div
to both custom elements. Only one of the
<content>
passing through into one of the nested custom elements.

Answer

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.