emma-k-alexandra/scrollama-web-components.html

## scrollama-web-components.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollama + Web Components</title>
</head>
<body>
  <!-- The web component -->
  <scrolly-element />

  <!-- Vue + Web Component -->
  <script src="https://cdn.skypack.dev/vue" type="module"></script>
  <script src="https://cdn.skypack.dev/@vue/web-component-wrapper" type="module"></script>

  <!-- Scrollama -->
  <script src="https://unpkg.com/intersection-observer"></script>
  <script src="https://unpkg.com/scrollama"></script>
  <script type="module">
    import Vue from "https://cdn.skypack.dev/vue"
    import wrap from "https://cdn.skypack.dev/@vue/web-component-wrapper"

    const template = `<div id="scrolly">
      <!-- The scollama steps -->
      <div class="step">1</div>
      <div class="step">2</div>
      <div class="step">3</div>
    </div>`

    const Scrolly = {
      mounted() {
        // set contents of shadow dom
        this.$root.$options.shadowRoot.innerHTML = template

        // attempt to set up scrollama
        // scrollama error: no step elements
        scrollama().setup({ step: '.step' })
      }
    }

    // Inject web component onto page
    const ScrollyElement = wrap(Vue, Scrolly)

    window.customElements.define(
      'scrolly-element',
      ScrollyElement
    )
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Scrollama + Web Components</title>
	</head>
	<body>
	<!-- The web component -->
	<scrolly-element />

	<!-- Vue + Web Component -->
	<script src="https://cdn.skypack.dev/vue" type="module"></script>
	<script src="https://cdn.skypack.dev/@vue/web-component-wrapper" type="module"></script>

	<!-- Scrollama -->
	<script src="https://unpkg.com/intersection-observer"></script>
	<script src="https://unpkg.com/scrollama"></script>
	<script type="module">
	import Vue from "https://cdn.skypack.dev/vue"
	import wrap from "https://cdn.skypack.dev/@vue/web-component-wrapper"

	const template = `<div id="scrolly">
	<!-- The scollama steps -->
	<div class="step">1</div>
	<div class="step">2</div>
	<div class="step">3</div>
	</div>`

	const Scrolly = {
	mounted() {
	// set contents of shadow dom
	this.$root.$options.shadowRoot.innerHTML = template

	// attempt to set up scrollama
	// scrollama error: no step elements
	scrollama().setup({ step: '.step' })
	}
	}

	// Inject web component onto page
	const ScrollyElement = wrap(Vue, Scrolly)

	window.customElements.define(
	'scrolly-element',
	ScrollyElement
	)
	</script>
	</body>
	</html>