Как использовать intro.js с Polymer 2?

Question

Как использовать intro.js с Polymer 2?

1

Я хочу использовать intro.js для первого использования пользователей в приложении Polymer 2. Ниже приведен код, который я пытаюсь использовать, но он не работает для меня.

<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 не является компонентом полимерного паука, поэтому я не могу понять, как его использовать с Polymer 2.

Amanshu Kataria 09 авг. 2017, в 14:24

Источник

Теги:

javascript

polymer

polymer-2.x

intro.js

1 ответ

Ещё вопросы

Schrodinger's cat · Accepted Answer · 2017-08-09T14-50-00.000Z

Это не сработает, как сейчас.

Asides

Если вы импортируете внешние стили в полимерный элемент, вам нужно использовать style-modules Читайте здесь, отныне, предпочтительно.
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

Это было действительно очень полезно :)