How to use intro.js with Polymer 2?

Question

I want to use intro.js for first-time user experience in my Polymer 2 application. Below is the code how I'm trying to use but it's not working out for me.

<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();
}

Here's the Codepen for the same. Since, intro.js is not a polymer web component so, I'm not able to figure out how to use it with Polymer 2.

Answer 1

It won't work as you have it right now

Asides

• If you are importing external styles into a polymer element, you need to use style-modules Read here , henceforth, preferably.
• The link rel=import type=css is deprecated, but If you still want to use them, they should be placed inside your dom-module for polymer to shim it.
• intro.js , can not be scoped to your polymer element. JS is scoped via IIFE's and you might have to code a wrapper to do that yourself for any external scripts

That is if you strictly want everything scoped.

Regarding Your question

The problem is, that intro.js, can not access DOM inside your element. Hence, it can not reach any of your P tags

One solution, is to move / distribute them to an outer scope like the document itself, by using 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>

Now, all you need to do is, place all your DOM inside the tags <my-app></my-app>

Only then will intro.js work on them. plunker