将 Reveal.js 与 Polymer 一起使用

Question

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

我对聚合物的看法得到了所有Slides/Sections。

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

当我尝试启动 Reveal.js 时，我遇到了与以下相关的问题：

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

我想是因为Reveal.js不能select一个Polymer生成的Webcomponent，因为Reveal.js需要把所有幻灯片内容单独写在html文件上。

那么我的问题是：如何将 Polymer Webcomponents 与 Reveal,js 一起使用？

Answer 1

我认为您现在很可能无法在使用 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 之类的方法访问，这意味着 [=22] =] 无法访问它们。

Answer 2

艾伦：是的，你是对的。

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

然后我创建了一个名为 createSlides 的函数，其中 - 基于 JSON 响应 - 我在幻灯片 div.

中附加幻灯片（部分）

首先，我创建了一个类似于以下内容的 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);
}

目前工作正常。

将 Reveal.js 与 Polymer 一起使用

Use Reveal.js with Polymer

reveal.js

polymer