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>
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.

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;
 
Next arrow_right 
Support this work
extension
zKit components v1.2.1
web enhancing bits