如何将 intro.js 与 Polymer 2 一起使用？答案

【问题标题】：How to use intro.js with Polymer 2?如何将 intro.js 与 Polymer 2 一起使用？
【发布时间】：2017-08-09 12:12:53
【问题描述】：

我想在我的 Polymer 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();
}

这是相同的Codepen。由于 intro.js 不是聚合物网络组件，所以我无法弄清楚如何将它与 Polymer 2 一起使用。

【问题讨论】：

标签： javascript polymer polymer-2.x intro.js

【解决方案1】：

它不会像你现在那样工作

旁白

如果您将外部样式导入到聚合物元素中，您需要使用style-modules 阅读here，以后最好。
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 才能对它们起作用。 plunker

【讨论】：

这真的很有帮助:)