# @totallyinformation/web-components: v1.2.0 release 2025-06-01
**URL:** https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342
**Category:** Share Your Projects
**Tags:** uibuilder
**Created:** [30 May 2025 15:16 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342 "2025-05-30T15:16:56Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 May 2025 15:16 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342/1 "2025-05-30T15:16:56Z")
Please note that I will continue to add to this thread with new releases. Please check the title and the end of the thread to see the updates.
* * *
Hi all, I am pleased to announce the arrival of the first full release of my package of vanilla HTML web components.
[https://www.npmjs.com/package/@totallyinformation/web-components](https://www.npmjs.com/package/@totallyinformation/web-components)
They also have their very own website which contains all of the documentation and a demo/test page for each component.
> **[TotallyInformation's web-components](https://wc.totallyinformation.net)**
These have been hanging around in various forms for a couple of years now but I've finally managed to get them to a point where I'm happy with enough of them to make them worth publishing on npm.
As it says in the package, these are not specific to Node-RED or to UIBUILDER and all of the components will work without either. However, some of them do have UIBUILDER enhancements. But you should be able to equally use them with `http-in`/`template`/`http-response` nodes and even with either version of Dashboard.
If you want to use them with UIBUILDER, simply add `@totallyinformation/web-components` via uibuilder's library manager. If you want to use them without installation, they can be used direct from [JSDELIVR](https://www.jsdelivr.com/package/npm/@totallyinformation/web-components).
Every component can be used either by loading the script file or by importing in an ES Module.
```html
```
```js
import https://cdn.jsdelivr.net/npm/@totallyinformation/web-components@1.1.0/dist/call-out.esm.min.js
```
Most of the components have no dependencies.
Here are the initial components worth really playing with. There are a bunch of others that are in development and may or may not work. See the [documentation](https://wc.totallyinformation.net/docs/#/) for details.
### [Live](https://wc.totallyinformation.net/docs/#/?id=live)
These are fully usable in their current form. They may still evolve but are considered relatively stable.
These components can be considered `live` and ready for extended use.
| Component | Description | Class Name |
| --- | --- | --- |
| [`button-send`](https://wc.totallyinformation.net/docs/#/components/button-send) | A simple button that outputs key info either via a custom document event. When used with UIBUILDER for Node-RED, will send a message back to Node-RED. Also allows block contents on the button. | `ButtonSend` |
| [`call-out`](https://wc.totallyinformation.net/docs/#/components/call-out) | Displays nicely formatted GitHub/Obsidian style call-out information boxes. Colour coded with an icon and over-ridable default title. | `CallOut` |
| [`collapsible-headings`](https://wc.totallyinformation.net/docs/#/components/collapsible-headings) | Turns a section of Hn headings and block contents into collapsible content around the heading levels. | `CollapsibleHeadings` |
| [`data-list`](https://wc.totallyinformation.net/docs/#/components/data-list) | Create a list from a data object. | `DataList` |
| [`html-include`](https://wc.totallyinformation.net/docs/#/components/html-include) | Dynamically load external HTML content very easily without needing an iFrame. | `HtmlInclude` |
| [`led-gauge`](https://wc.totallyinformation.net/docs/#/components/led-gauge) | A simple LED-style gauge widget with easily controlled colours and responsive layout. | `LedGauge` |
### [Beta](https://wc.totallyinformation.net/docs/#/?id=beta)
These components can be considered `beta` quality or better. They may not be fully comprehensive but they have basic usefulness.
| Name | Description | Class Name |
| --- | --- | --- |
| [`labelled-value`](https://wc.totallyinformation.net/docs/#/components/labelled-value) | A simple label and value pair with easy styling. | `LabelledValue` |
| [`syntax-highlight`](https://wc.totallyinformation.net/docs/#/components/syntax-highlight) | Show JSON or JavaScript object data as highlighted HTML. | `SyntaxHighlight` |
| [`visible-console`](https://wc.totallyinformation.net/docs/#/components/visible-console) | Reflects (clones) browser `console` log outputs to an on-screen visible block. Useful if needing to debug web apps on mobile devices with no access to the dev tools console. | `VisibleConsole` |
Do check out the [Roadmap](https://wc.totallyinformation.net/docs/#/roadmap) and [Ideas](https://wc.totallyinformation.net/docs/#/ideas) pages in addition to the demo pages and if you want something different or think I should prioritise something, please do give me a shout.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 May 2025 19:34 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342/2 "2025-05-30T19:34:20Z")
And on an even happier note!
I had completely forgotten that I had already built into the base class a standard method of remote-controlling my web components from Node-RED - via UIBUILDER of course.
You can send a message to your uibuilder controlled web page with a `msg.topic` in the form: `component-name::instance-id` and then the msg.payload must be an object where each property matches a property or attribute name in the component.
A simple example using the `data-list` component would be, if you have `` on your page, you could send a message like this:
```json
{
// The specific topic format routes the msg to the correct component
// where `id` is the id of the component to control.
"topic": "data-list::dl1",
// The payload is the data to set for the component.
"payload": {
// Each property of the payload must match a property or attribute name of the component.
"keyvalueseparator": " 💠",
"liststyle": "'😎 '",
"data": {
"xxx": "Triple x",
"yyy": "Triple y",
"zzz": "triple z"
},
"style": "background-color: var(--surface4);"
}
}
```
Which might give you something like this:
(Except that no JavaScript was actually used at all!) 😃
The list would be dynamically rebuilt with the new settings and data.
I will, of course, be producing some proper examples.
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [30 May 2025 19:46 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342/3 "2025-05-30T19:46:51Z")
> [@TotallyInformation](#):
>
> compontent-name::instance-id
Should that be component-name::instance-id
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 May 2025 19:48 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342/4 "2025-05-30T19:48:26Z")
Depends how you read it. 😃
The component name always has to have a dash in it, that is a W3C standard that can't be avoided.
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [30 May 2025 19:49 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342/5 "2025-05-30T19:49:48Z")
Look again 😂
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 May 2025 19:50 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342/6 "2025-05-30T19:50:23Z")
~~Doh! OK, you got me, trying to rush as always. ☹~~
Don't know what you are talking about - it is perfectly correct! 😎
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [31 May 2025 19:53 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342/8 "2025-05-31T19:53:37Z")
I am already working on the next release.
That will mostly expand on the `data-list` component.
- Allowing for nested lists
- Moving from shadow dom to light dom (presents some challenges around styling)
- Adding a custom event so that your own code can track when the list gets rebuilt
Moving to the light DOM (the main page DOM that is) means that you will be able to better style nested lists. But it does present some interesting challenges regarding scoped styles.
To deal with that, the base component is likely to be updated with a new function that will allow easy inserting of new styles before the static styles you insert in your HTML.
Before - because that allows you to override all the styles with your own styling.
Adding to the base component will mean that all new and updated components in the package will inherit the feature.
Because of that, you will be able to specify a loading priority in case of clashes.
This is only useful for components that don't use the Shadow DOM but it is good practice to not use that if you don't have to.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [1 June 2025 19:00 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342/9 "2025-06-01T19:00:32Z")
Welcome to June and a new release of the web-components.
## v1.2.0 Changes
- Lots of ESLINT fixes.
- Tidy up and rationalise the docs home page, roadmap and ideas pages.
- Start to document the standard Node-RED/UIBUILDER to browser remote-control integration.
- A few minor documentation fixes.
- Website homepage correction - thanks to [Paul Reed](https://github.com/Paul-Reed) for spotting the issue.
### `data-list` Component
- No longer uses the shadow DOM. Specific styles prepended to the `head`.
- For nested lists, sub-lists are given a class of `nested-list` and a `data-depth` attribute so that they can be styled separately.
### Base Component
- **NEW** - `prependStylesheet(styletext, order)` method added. This allows you to prepend a stylesheet for the component to the web page. This is useful for adding styles that need to be applied before the page's own styles. Especially useful for components that don't use the Shadow DOM.
### Component Template
- Added comment to `constructor` to remind that `this.prependStylesheet` can be used to add styles before the page's own styles. when the component does not use the Shadow DOM.