Shadow View

Decralative shadow DOM component that supports not just scoped CSS styles, but also:

  • Scoped JavaScript
  • Data model with two-way binding (model ⇄ view)
  • Templating
  • Dynamic component interface with definable public methods and properties
  • Component's interoperability with the using directive
  • Nested components
  • Custom events
  • Behaviors
  • Lazy loading


1. Import shadow-view module

<script type="module">
import "";

2. Add component to the page

<shadow-view :mode="closed"

<!-- anything inside here will
be hosted in a shadow DOM -->

<style media="#">

/* this is a scoped CSS */


<script type="jscript">

// This is a scoped script
console.log(this, $, context);

// expose component's methods
expose = {
testMethod: () => console.log('This is a method of this component'),
get testProp() { return 'this is a read-only property'; }


try Example on CodePen

Option attributes

  • z-context="<context_id>" optional
    identifier name to be used to access this component from JavaScript.
  • :on:<event_name>="<handler>" optional
    set handler function for event <event_name>
  • :ready optional
    sets a callback to call when the component is ready.
  • :mode optional
    sets the attachShadow mode. It can be open or closed. Default is closed.


Find out how to use scoped scripts and all other zuix.js component's features from zuix.js website.


Get a reference to the component instance using the :ready callback:

function onContextReady(sc) {
self.myShadowComponent = sc;


Methods can be exposed using the expose object like shown in the usage example.

let a = myShadowComponent.testProp;
Next arrow_right 
Support this work
zKit components v1.2.1
web enhancing bits