Context Data

  • Type: object
  • Origin: Component Context
  • Availability: client
  • readonly in client context

It gives you information about the element dataset.

You can use this key to avoid polluting your DOM with invalid attributes.

💡 This helps Nullstack set attributes without wasting time validating them.

Any data-* attributes will receive a respective camelized key on the data object.

You can assign data attributes both via data-* and a data key that accepts an object with camelized keys.

The kebab version is also available in the context.

import Nullstack from 'nullstack';

class ContextData extends Nullstack {

  count = 1;

  calculate({data}) {
    this.count = this.count * data.multiply + data.sum;

  renderInner(context) {
    const {data} = context;
    return (
      <div data={data}>
        is same as
  render({data}) {
    return (
        <button onclick={this.calculate} data-multiply={3} data={{sum: 2}}>
        <Inner data-framework-name="Nullstack" />


export default ContextData;

💡 Camelized keys from the data object will result in kebab attributes in the DOM.

Next step

⚔ Learn about the context instances.