Skip to main content

Using Web Components

Web User Interfaces in the devkit are provided as Web Components, and can therefore be used in any Web page or project, with any framework or library.

HTML (Generic Case)

Using a Web Component is as simple as importing it, and using the new tags in an HTML document.

For example, to use the blindnet Privacy Request Capture Interface Web Component:

<script type="module"   src="https://unpkg.com/@blindnet/prci/dist/index.core.min.js?module"></script>
...
<bldn-priv-request></bldn-priv-request>

For more information on Web Components, see WebComponents.org and MDN.

React

See React - Web Components.

Vue

See Vue and Web Components

Angular

Angular only requires you to set-up the CUSTOM_ELEMENTS_SCHEMA schema in order to use any Web Components without warnings or errors.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { YourComponent } from './your.component';

@NgModule({
declarations: [YourComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourModule {}

Lit

Lit is built with standard Web Components in mind. It therefore doesn't require to follow any specific steps in order to use external Web Components.

As a matter of fact, it is the library we use to build all Web Components in the devkit. As a consequence, using blindnet Web Components in a Lit context has the additional benefit of removing any need to load this additional library (saving you around 5.9kB at runtime).

We recommend using the Open WC generator along with Modern Web tools to build Modern Web Apps with the Privacy Components for the Web.