将leaver.js与Polymer一起使用

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

我对polymer有一个观点，它可以得到所有的幻灯片/章节

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

幻灯片标题
幻灯片内容

当我尝试启动discover.js时，我遇到了以下问题：

（索引）：21136未捕获类型错误：无法读取属性 未定义的“querySelectorAll”

我认为这是因为leaver.js无法选择由Polymer生成的Webcomponent，因为leaver.js需要将所有幻灯片内容分别写入html文件中

---

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

我认为您现在很可能无法在使用Polymer创建的web组件中使用Reveal.js，原因如下

如果查看它，会在主文档上查找具有

显示

和

幻灯片

类的dom元素，如下所示：

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

---

问题是聚合元素有自己的dom树，这是一个不同的dom树，无法使用

document.querySelector

等方法访问，这意味着leaver.js无法访问它们。

艾伦：是的，你是对的

现在我直接用JS和DOM元素创建DOM元素

然后，我创建了一个名为createSlides的函数，其中基于JSON响应，在slides 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);
}

ready（）
{
这个。移除初始滑动（）；
this.addSomeSlides（）；
这个.startRevealPresentation（）；
}
clearInitialSlides（）
{
var slidesComp=this.$.slides；
while（slidesComp.hasChildNodes（））{
slidesComp.removeChild（slidesComp.lastChild）；
}
}
addSomeSlides（）
{
var slide1=document.createElement（“节”）；
var image=document.createElement（“img”）；
image.src=“some/path/to/image.jpg”；
幻灯片1.追加子项（图像）；
此.slides.appendChild（slide1）；
var slide2=document.createElement（“节”）；
slide2.innerHTML=“测试内容”
此.$.slides.appendChild（幻灯片2）；
}

---

现在工作很好。

是的，你说得对，我补充了我自己的答案，可能不是最好的，但工作很好。