Component Context API

When a UI component is placed on a page, it receives an instance of the ComponentContext class, as a property named context. This context property is set before the first connectedCallback lifecycle callback. When using a framework, that means it is available in Vue's created hook or Svelte's onMount function.

<template>
  <h1>Hello, World!</h1>
</template>

<script>
export default {
  name: 'hello-world',
  props: ['context'],
  created() {
    console.log(this.context);
    // result: ComponentContext { ... }
  },
};
</script>

<style scoped></style>

<script>
  import { onMount } from 'svelte';

  export let context;
  
  onMount(() => {
    console.log(context);
    // result: ComponentContext { ... }
  });
</script>

<h1>Hello, World!</h1>

<style></style>

const template = document.createElement('template');
template.innerHTML = `<h1>Hello, World!</h1>`;

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    console.log(this.context);
    // result: ComponentContext { ... }
  }
}

customElements.define('hello-world', HelloWorld);

The component context instance can provide a UI Component with data and application-wide functionality through a number of different properties and methods.

A complete class reference can be found here.