如何使用intro.js与聚合物2？

Question

我想在我的聚合物2应用程序中使用intro.js进行首次用户体验.下面是我试图使用的代码，但它并不适用于我。

<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<script src="intro.js/minified/intro.min.js"></script>
<link rel="import" type="css" href="intro.js/minified/introjs.min.css">

<dom-module id="my-app">
   <template>
      <style>
      </style>
      <p class="line1" data-intro='Hello step one!' data-step="1">Line 1</p>
      <p class="line2" data-intro='Hello step two!' data-step="2">Line 2</p>
      <p class="line3" data-intro='Hello step three!' data-step="3">Line 3</p>
      <p class="line4" data-intro='Hello step four!' data-step="4">Line 4</p>
   </template>
</dom-module>

connectedCallback(){
   super.connectedCallback();
   introJs().start();
}

这是同样的科德芬。因为，intro.js不是一个聚合物网络组件，所以，我无法找到如何使用它与聚合物2。

Answer 1

它不会像你现在这样工作的

Asides

• 如果要将外部样式导入到聚合物元件中，则需要使用style-modules Read 这里，从今以后最好如此。
• link rel=import type=css是不受欢迎的，但如果你还想使用它们，它们应该放在你的dom-module里，让聚合物把它打磨。
• intro.js，不能限定到你的聚合物元素。JS的作用域是通过IIFE的，您可能需要为任何外部脚本自己编写一个包装器。

也就是说，如果你严格要求所有的范围。

关于你的问题

问题是，intro.js不能访问元素内部的DOM。因此，它无法到达任何P标记。

一种解决方案是使用slots将它们移动/分发到外部范围(如文档本身)。

<dom-module id="my-app">
  <template>
    <!-- uncomment this, if you have a style module pointing to intro'scss only-->
    <!--<style include="intro-css"></style>-->
    <slot>

    </slot>
  </template>
</dom-module>

现在，您需要做的就是将所有DOM放在标记<my-app></my-app>中

只有到那时，intro.js才能对它们起作用。柱塞