Scrollmeister JavaScript DOM API

First of all things like appendChild, removeChild, setAttribute, removeAttribute, etc. work exactly as you'd expect.

There are three ways you interact with Scrollmeister through the DOM: attributes, behavior props and events.

Attributes

If you use setAttribute / removeAttribute with an attribute that corresponds to a Scrollmeister behavior (e.g. layout) Scrollmeister will internally create/update/remove said behavior for you. However, if you want to update an existing behavior you should use the props directly. So for example say an element already has the layout behavior with a value of guides: left center; height: 16/9; and you want to change the height, you might use setAttribute('layout', 'guides: left center; height: 3/4;'). But this will force Scrollmeister to parse all of the props again and you also need to make sure to always pass all of the props even if they didn't change. If you want to get or set a specific prop, use the props api.

Behavior Props

When a behavior is added to an element, it is automatically exposed as a prop on the DOM node. E.g. document.querySelector('element-meister[layout]').layout is a reference to the layout behavior of the given element. Now if you want to update the height, you can just do el.layout.height = '300px'. If a behavior exposes other methods such as playVideo of the youtube behavior, you can use them like this el.youtube.playVideo().

Events

Using addEventListener you can listen to events just like with regular elements. Scrollmeister fires certain built-in events and some behaviors also emit custom events. For example if you attach a behavior, you get a namespaced attach event.

let element = document.querySelector('element-meister:not([layout])');

element.setAttribute('layout', 'guides: left right');

//Wait for the behavior to attach (async).
element.addEventListener('layout:attach', e => {
  //'left right'
  console.log(e.details.guides);
});