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

Usage

1. Import shadow-view module

<script type="module">
  import "https://zuixjs.github.io/zkit/lib/1.2/controllers/shadow-view.module.js";
</script>

2. Add component to the page

<shadow-view :mode="closed"
             :ready="onContextReady">
  
  <!-- anything inside here will
       be hosted in a shadow DOM -->    

  <style media="#">

    /* this is a scoped CSS */

  </style>

  <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'; }
    }

  </script>
  
</shadow-view>

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.

Scripting

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

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

Methods

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

myShadowComponent.testMethod();
let a = myShadowComponent.testProp;