Use Reveal.js with Polymer

Question

I have a project with Polymer + Reveal.js

I have a view with polymer that gets all the Slides/Sections.

<template is="dom-repeat" items="[[my.slides]]" as="slide">
    <section>
        <h1>slide.title</h1>
        <h2>slide.content</h2>
    </section>
</template>

When I try to start Reveal.js, I have the issue related to:

(index):21136 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined

I think is because Reveal.js cannot select a Webcomponent generated by Polymer, because Reveal.js needs to have all slides content wrote on the html file by separate.

Then my question is: How to use Polymer Webcomponents with Reveal,js?

Answer 1

Alan: Yes, you are right.

Now I am creating DOM elements directly with JS avoiding Polymer shadowDOM elements.

Then I created a function called createSlides where - based in a JSON response - I appending slides (sections) within slides div.

Fist I create a Polymer template similar to:

<template>
    <div class="reveal">
        <div id="slides" class="slides">
             <section>
                 This section will be removed
             </section>
        </div>
    </div>
</template>

Next I removed the unused slide and appended some slides. Finally start the Reveal presentation

ready()
{
    this.removeInitialSlide();
    this.addSomeSlides();
    this.startRevealPresentation();
}

clearInitialSlides()
{
    var slidesComp = this.$.slides;
    while (slidesComp.hasChildNodes()) {
        slidesComp.removeChild(slidesComp.lastChild);
    }
}

addSomeSlides()
{
    var slide1 = document.createElement("section");
    var image = document.createElement("img");
    image.src = "some/path/to/image.jpg";
    slide1.appendChild(image);

    this.$.slides.appendChild(slide1);

    var slide2 = document.createElement("section");
    slide2.innerHTML = "<h1>Test content</h1>"

    this.$.slides.appendChild(slide2);
}

Working fine for now.