(web-components)= # Custom Web Components Custom web components are HTML tags that you can directly embed into your HTML code. The advantage is that no further javascript framework is required, i.e. you can use the components of this library in a framework that does not use reactjs. This package exports three custom web components: - {ref}`dasf-module-web-component`: To render an entire DASF backend module - {ref}`dasf-class-web-component`: To render a single class of a DASF backend module - {ref}`dasf-function-web-component`: To render a single function of a DASF backend module. ## Components ```{toctree} --- maxdepth: 1 --- module class function ``` ## General Usage The custom web components expose more or less the same API as their counter parts in react. The only difference is that you do not pass javascript objects in here but strings that are then interpreted accordingly. The most common usecase to render a DASF backend works like this: ```html ``` Here the {ref}`dasf-module` custom web component is used with a `websocket-url` and a `topic` that are used to create the connection to the message broker. Furthermore we have to load this libary in a `script` tag. ### Custom response, error and progress handlers If we want to handle the response ourselve using the {attr}`~ModuleContainerOptions.onResponse` option, we to listen to the `response` event of the custom web component. The response data can then be accessed via the `event.detail` attribute: ```html ``` The same works for the errors via the `error` event, and progress reports via the `progress` event. If we want to skip the default handling of response, error or progress reports, we can set the corresponding attribute out of `skip-default-response-handler`, `skip-default-error-handler` and `skip-default-progress-handler` or use the corresponding `...-check` functions for this. See the :class:`ContainerBaseOptions` for more information on these arguments.. ### Creating the connection via function When we want to create the connection ourselve as we may want to use it in several places, we have to create a function that returns the connection we created ```html ``` For more information on the properties for the components, see the corresponding sections for the {ref}`dasf-module properties `, {ref}`dasf-class properties ` and {ref}`dasf-function properties `.