Question

我有一个Polymer + Reveal.js的项目

我有聚合物的视图可以获得所有幻灯片/部分。

file

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

有关

（index）：21136 Uncaught TypeError：无法读取属性 'querySelectorAll'未定义

我认为是因为Reveal.js无法选择Polymer生成的Web组件，因为Reveal.js需要将所有幻灯片内容分别写在html文件中。

然后我的问题是：如何将Polymer Webcomponents与Reveal一起使用，js？

Answer 1

艾伦：是的，你是对的。

现在我用JS直接创建DOM元素，避免使用Polymer shadowDOM元素。

然后我创建了一个名为createSlides的函数 - 基于JSON响应 - 我在幻灯片div中附加了幻灯片（部分）。

Fist我创建了一个类似于：

的Polymer模板

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

接下来，我删除了未使用的幻灯片并添加了一些幻灯片。最后启动Reveal演示文稿

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

我认为您现在很可能无法在使用Polymer创建的Web组件中使用reveal.js，这就是原因。

如果您查看reveal.js's code，它会在主文档中查找包含reveal和slides类的dom元素，如下所示：

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

问题在于Polymer元素有自己的local dom，这是一个不同的dom树，使用像document.querySelector这样的方法无法访问，这意味着reveal.js无法访问它们

将Reveal.js与Polymer一起使用

2 个答案: