Reveal.js与聚合物配合使用

Question

我有一个与聚合物+ Reveal.js有关的项目

我对聚合物的看法得到了所有的幻灯片/部分。

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

当我尝试启动Reveal.js时，我遇到的问题是：

(索引)：21136未定义的TypeError:无法读取未定义的属性“querySelectorAll”

我认为这是因为Reveal.js无法选择由聚合物生成的all组件，因为Reveal.js需要将所有幻灯片内容单独写入html文件。

那么，我的问题是:如何使用聚合物Webcomponents与显示，js？

Answer 1

艾伦:是的，你是对的。

现在，我使用JS直接创建DOM元素，避免了聚合物shadowDOM元素。

然后，我在JSON响应中创建了一个名为createSlides的函数--我在幻灯片div中添加了幻灯片(部分)。

首先，我创建了一个类似于：

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

接下来，我删除了未使用的幻灯片，并附加了一些幻灯片。最后开始展示

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);
}

现在工作还不错。

Answer 2

我认为你很可能现在不能在用聚合物创建的web组件中使用reveal.js，原因如下。

如果您查看Reval.js代码，它将在主文档中查找包含reveal和slides类的dom元素，如下所示：

dom.wrapper = document.querySelector( '.reveal' );
dom.slides = document.querySelector( '.reveal .slides' );

问题是聚合物元素有自己的局部区域，这是一个不同的dom树，不能使用document.querySelector等方法访问，这意味着reveal.js不能访问它们。