Question

我希望在我的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不是聚合物网络组件，所以我无法弄清楚如何将它与聚合物2一起使用。

Answer 1

它现在不能正常工作

<强>旁白

如果要将外部样式导入聚合物元素，则需要使用style-modules阅读here，此后，最好。
{@ 1}}已弃用，但如果您仍想使用它们，则应将它们放在link rel=import type=css聚合物中以便对其进行填充。
dom-module，不能限定您的聚合物元素。 JS通过IIFE进行范围设计，您可能需要编写一个包装器来自行编写任何外部脚本

如果您严格要求范围内的一切。

关于您的问题

问题是，intro.js无法访问元素中的DOM。因此，它无法访问您的任何intro.js代码

一种解决方案是使用P

将它们移动/分发到文档本身等外部作用域

slots

现在，您需要做的就是将所有DOM放在标记<dom-module id="my-app"> <template>   <slot> </slot> </template> </dom-module>

中

只有这样，intro.js才会对它们起作用。 plunker

如何在Polymer 2中使用intro.js？

1 个答案: