Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Scrollama + Web Components
<!DOCTYPE html>
<html lang="en">
<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>
<!-- The web component -->
<scrolly-element />
<!-- Vue + Web Component -->
<script src="" type="module"></script>
<script src="" type="module"></script>
<!-- Scrollama -->
<script src=""></script>
<script src=""></script>
<script type="module">
import Vue from ""
import wrap from ""
const template = `<div id="scrolly">
<!-- The scollama steps -->
<div class="step">1</div>
<div class="step">2</div>
<div class="step">3</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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment