#Web Component Support

1 messages · Page 1 of 1 (latest)

inner sluice
#

Question from @flat pond: #dev-support message

Why would you need to have entirely custom tags instead of using stuff like span/div with a class assigned?

#

@flat pond The way web components work is that you register a custom tag with the browser.

https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements

Here is how I was doing it in the ready hook. I'm using Svelte to make a web component, but you could use any library / Lit, etc. or even just a plain ESM / JS file.

import MyChatMessage   from './view/webcomponent/MyChatMessage.svelte';

Hooks.once('ready', () =>
{
   customElements.define('my-chat-message', MyChatMessage);
});

Then use <my-chat-message/> in a content area.

valid gale
#

There have been other requests for web component support, so this isn’t a new suggestion, and it’s one we might well entertain when it comes around to supporting multiple application rendering backends when we develop App V2

inner sluice
#

Cool.. Right on.. It definitely is easy enough to manage creating / loading web components from any module / system, etc.

Glad to hear that a proposal / method to make it happen may come to Foundry in the future.

It definitely is something that can be used by any application rendering library be it handlebars or otherwise since it is "library neutral" so to speak.

It can be used now, just not in user content areas that go through HTML sanitation.

inner sluice
#

Replying to @wintry finch :
#dev-support message

Moving discussion back to the thread.

Interestingly enough... Just did a little test / mostly CSS. Perhaps the x- tag creates a div, but an "unknown tag" can still be styled and the internal content shows up styled; IE the some text part. Didn't know that.. Granted the example is from a Svelte component, but would apply to raw CSS / HTML too.

A WC does support "slots" and such for internal content to WC tags.

A non-container tag like <wc-stat-block docId="DOCUMENT_ID"/> would just be ignored / no content displayed if the WC was not registered.

I just found it interesting that you can style an unknown tag and the styles take with content in between closing / opening tags.

unknown.png
inner sluice
#

@wintry finch the info / page you found appears to be very old / circa 2011 prior to the web component spec / introduction it seems.

#dev-support message

The Web Component spec initally appeared in 2012 w/ mainstream browser adoption between 2018 - 2020. And for most mobile browsers very recently this year in February.

wintry finch
inner sluice
wintry finch
inner sluice
wintry finch
#

I used a "non-standard" grid and row elements here and it works exactly like <div class="grid"></div>

unknown.png
#

Yeah. Styled it too

unknown.png
inner sluice
#

Well certainly interesting! Though I'm not sure if it is interpreted by the browser as <div class="grid"></div> and who knows if it would work in other browsers besides Chrome which is the only one I tested.

wintry finch
inner sluice
#

Yeah.. Just tested Firefox myself. 😛

wintry finch
#

Anyway. I don't think that it should be an issue for core to be concerned about supporting all things considered.

inner sluice
#

Yeah... a little yak shaving in the discussion here. ;P Good to know though.

#

For core it's a decision of do we let WC through in user content areas; hopefully this falls in the "low hanging fruit" category and can be considered.

valid gale
worn coral
#

I love the start of it chat messages get satanized 😈 I also think that being able to use web components everywhere could help with structure of the web gui.