Flags
Flags are the set of settings which are enabling or disabling some features or behavior.
Here is the complete list of them:
renderShadow
ssrMode
isVirtual
allowCustomTemplate
pauseRender
processInnerHtml
readyToDestroy
ctxOwner
allowTemplateInits
renderShadow
Enables Shadow DOM mode for the component. If enabled, you can use standard slots in your templates and :host
selectors in your styles. By default, Symbiote-components don't use Shadow DOM.
Example:
class MyComponent extends Symbiote {
renderShadow = true; // Default is 'false'
}
ssrMode
Enables Control Capture workflow, that means, that the component will use the own nested markup as a template. This markup could be provided by server as a part of the regular HTML.
Texts (textContent
) and attribute bindings will be activated on first update, and will not be changed at the component's state initialization.
Example:
class MyComponent extends Symbiote {
ssrMode = true; // Default is 'false'
}
Live example: https://symbiote.in-wave.com/~/live/ssr-hydration/
isVirtual
Enables workflow, when component will render its own template only, without the wrapping Custom Element. In this case, Custom Element will be used as a placeholder only and disappear after initial rendering. All data bindings will continue to work just in memory.
Example:
class MyComponent extends Symbiote {
isVirtual = true; // Default is 'false'
}
allowCustomTemplate
Enables behavior, when the component's template will be taken from the accessible part of common document by the provided selector.
Example:
class MyComponent extends Symbiote {
allowCustomTemplate = true; // Default is 'false'
// ...
}
Then you can use the use-template
attribute to connect some external template to your component:
<template id="my-tpl">
<h1>{{someHeading}}</h1>
</template>
<my-component use-template="template#my-tpl"><my-component>
pauseRender
This will disable default render stage to make possible to use some additional logic before. Then, the render()
function can be called manually.
Example:
class MyComponent extends Symbiote {
pauseRender = true; // Default is 'false'
initCallback() {
fetch('../my-data.json').then((response) => {
response.json().then((data) => {
this.set$(data);
this.render();
});
});
}
}
processInnerHtml
This is work quite similar as ssrMode
, but all initiated data will be rendered immediately. So, in this case, you can use the standard template bindings syntax for the text nodes: {{myProp}}
.
Example:
class MyComponent extends Symbiote {
processInnerHtml = true; // Default is 'false'
// ...
}
HTML example:
<my-component>
<h1>{{someHeading}}</h1>
</my-component>
readyToDestroy
This will disable the default destruction workflow (memory cleanup) in cases, when your component is removed from the DOM and you have no plans to put it back. If this flag enabled, component will not be destroyed.
Example:
class MyComponent extends Symbiote {
readyToDestroy = false // Default is 'true'
}
ctxOwner
This will help you to control shared context in cases, when some components in the same context are removed or added.
Example:
class MyComponent extends Symbiote {
ctxOwner = true; // Default is 'false'
}
This also could be set with a ctx-owner
HTML-attribute:
<my-component ctx-owner></my-component>
allowTemplateInits
This flag enables and disables the automated property initialization from the template mentions.
Example:
class MyComponent extends Symbiote {
allowTemplateInits = false; // Default is 'true'
}
// The 'heading' property won't be initialized,
// and you should add it manually to the 'init$' object:
MyComponent.template = html`
<h1>{{heading}}</h1>
`;