Skip to content

Web Components

So called Custom Elements, running as a Web Component can be used to run the dnb-ui-lib components in all other frameworks like Dojo.

Example usage

// Method #1 (will import all components)
import { enableWebComponents } from 'dnb-ui-lib/components'
enableWebComponents()
// Method #2 (will import all components)
import 'dnb-ui-lib/components/web-components'
// Method #3 (will import all components)
import 'dnb-ui-lib/web-components'
// Method #4
// Will import only the code for the Button
// NB: web-component without "s"
import 'dnb-ui-lib/components/button/web-component'
// Method #5
// Will only enable the Button Web Component
import { Button } from 'dnb-ui-lib/components/Button'
Button.enableWebComponent()

Now we can use our web components right away in our markup.

Button

Input

My Value

Events

You may have a look at HTML & ES5 event handling for both Declarative and Imperative usage and examples.

Example

Have a look at this UDM example app as well as the Web Component example.