techhub.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A hub primarily for passionate technologists, but everyone is welcome

Administered by:

Server stats:

4.6K
active users

#webcomponent

1 post1 participant0 posts today
Paul Rosen<p>Because of the generic nature of the terms, I'm having trouble searching for something that should have a page in the Nuxt docs somewhere: </p><p>I want to use an existing Web Component (developed by a third party) in a Nuxt app. It is having trouble with the SSR and I can't figure out how to work around it so that the web component is named in the template area but is only initialized in the browser.</p><p>Or, alternately, what I can tell the developer to do differently to make it work. It says it can't find "HTMLElement".</p><p><a href="https://hachyderm.io/tags/nuxt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nuxt</span></a> <a href="https://hachyderm.io/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponent</span></a></p>
Dave 🧱 :cursor_pointer:<p>Wanted to try out this &lt;syntax-highlight&gt; <a href="https://mastodon.design/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponent</span></a> for myself <a href="https://andreruffert.github.io/syntax-highlight-element/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">andreruffert.github.io/syntax-</span><span class="invisible">highlight-element/</span></a></p><p>The result is super clean and a fair chunk smaller than what's typically used. Even works with contenteditable!<br><a href="https://codepen.io/daviddarnes/pen/bNVVVxQ?editors=1000" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/daviddarnes/pen/bNV</span><span class="invisible">VVxQ?editors=1000</span></a></p>
Helmut Tammen<p>Wouter Lemaire shows how to use any <a href="https://saptodon.org/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponent</span></a> in <a href="https://saptodon.org/tags/ui5" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui5</span></a> apps at <a href="https://saptodon.org/tags/ui5con" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui5con</span></a> 2025</p>
xoron :verified:<p>Are Web Components &amp; Cybersecurity A Better Combo?</p><p>I'm not trying to dunk on popular <a href="https://infosec.exchange/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> <a href="https://infosec.exchange/tags/frameworks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frameworks</span></a> – I'm sure they're totally fine for <a href="https://infosec.exchange/tags/cybersecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cybersecurity</span></a> stuff, probably get loads of reviews and <a href="https://infosec.exchange/tags/audits" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>audits</span></a>.</p><p>But from my angle: Web Components are *native* to the <a href="https://infosec.exchange/tags/browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>browser</span></a>. Doesn't that just inherently reduce the risk of **<a href="https://infosec.exchange/tags/SupplyChainAttacks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SupplyChainAttacks</span></a>** (you know, like a rogue `npm install` on a bad network) for your <a href="https://infosec.exchange/tags/AppSecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AppSecurity</span></a>?</p><p>Or am I overthinking it, and the <a href="https://infosec.exchange/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>framework</span></a> choice is less important than the <a href="https://infosec.exchange/tags/browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>browser</span></a>, <a href="https://infosec.exchange/tags/OS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OS</span></a>, or <a href="https://infosec.exchange/tags/device" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>device</span></a> running it? What are your thoughts, <a href="https://infosec.exchange/tags/DevCommunity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevCommunity</span></a>?</p><p>---</p><p>Quick context: I've got a <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ReactJS</span></a> <a href="https://infosec.exchange/tags/messagingApp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>messagingApp</span></a> (repo here: <a href="https://github.com/positive-intentions/chat" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/positive-intentions</span><span class="invisible">/chat</span></a>) and a separate <a href="https://infosec.exchange/tags/UIFramework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIFramework</span></a> (repo here: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/positive-intentions</span><span class="invisible">/dim</span></a>) built with <a href="https://infosec.exchange/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Lit</span></a> (which uses Web Components). I'm genuinely wondering if there's a compelling <a href="https://infosec.exchange/tags/cybersecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cybersecurity</span></a> reason to refactor the chat app to use my <a href="https://infosec.exchange/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponent</span></a> UI framework. Might be a whole new level of <a href="https://infosec.exchange/tags/SecurityByDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SecurityByDesign</span></a> for <a href="https://infosec.exchange/tags/FrontEndDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEndDev</span></a>.</p><p>FYI, same question's on Reddit here: <a href="https://www.reddit.com/r/ExperiencedDevs/comments/1lmk1rg/are_web_components_better_for_cybersecurity/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/ExperiencedDevs/c</span><span class="invisible">omments/1lmk1rg/are_web_components_better_for_cybersecurity/</span></a>, got some good <a href="https://infosec.exchange/tags/insights" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>insights</span></a>, but want to make sure nothing's getting overlooked! Let's discuss <a href="https://infosec.exchange/tags/InfoSec" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>InfoSec</span></a> <a href="https://infosec.exchange/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://infosec.exchange/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenSource</span></a> <a href="https://infosec.exchange/tags/TechQuestion" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TechQuestion</span></a>.</p>
Wolfram wants peace<p>thanks to a discussion on reddit [1] and some links [2] I came across a different view on <a href="https://mastodontech.de/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a>. <br>In short, just wrap content in a <a href="https://mastodontech.de/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponent</span></a> instead of trying to "upgrade" it. Like so:</p><p>&lt;user-avatar&gt;<br> &lt;img src&gt;<br>&lt;/user-avatar&gt;</p><p>I always thought until now that it should rather be <br> <br> &lt;img src is=user-avatar&gt;</p><p>but `is` is not widely usable.<br>I still need to digest it. I see the use cases, but somehow feels still strange</p><p>[1] <a href="https://www.reddit.com/r/HTML/comments/1ldt5s4/spaish_upgrading_the_details_element/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/HTML/comments/1ld</span><span class="invisible">t5s4/spaish_upgrading_the_details_element/</span></a><br>[2] <a href="https://adactio.com/journal/20618" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">adactio.com/journal/20618</span><span class="invisible"></span></a></p>
westbrook<p><span class="h-card" translate="no"><a href="https://front-end.social/@webkit" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>webkit</span></a></span> Also, while I'm here, <a href="https://mastodon.social/tags/firefox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>firefox</span></a> <a href="https://mastodon.social/tags/mozilla" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mozilla</span></a> <span class="h-card" translate="no"><a href="https://mastodon.social/@FirefoxDevTools" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>FirefoxDevTools</span></a></span> where's my support for `:host:has(...)` at!?!</p><p><a href="https://mastodon.social/tags/testTheWebForward" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>testTheWebForward</span></a> <a href="https://mastodon.social/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponent</span></a></p>
Jon<p>I'm trying to make <a href="https://mastodon.social/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponent</span></a> with the exact same API as a native HTMLVideoElement - is there any clever way to do it?</p>
westbrook<p><span class="h-card" translate="no"><a href="https://front-end.social/@matuzo" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>matuzo</span></a></span> Shadow DOM isn’t the only part of the platform that <a href="https://mastodon.social/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponent</span></a> popularity is adding pressure on automated tools to support. Things like Element Internals are getting left off the menu in many places, like <a href="https://github.com/dequelabs/axe-core/issues/4259" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/dequelabs/axe-core/</span><span class="invisible">issues/4259</span></a>, just as they and soon things like Reference Targets start to expand as well. 🥺</p><p><a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a> <a href="https://mastodon.social/tags/testTheWebForward" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>testTheWebForward</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Approaches</span></a><br>Glossary web component · A slick way to add links and context to your content <a href="https://ilo.im/163pvz" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/163pvz</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Glossary" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Glossary</span></a> <a href="https://mastodon.social/tags/Content" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Content</span></a> <a href="https://mastodon.social/tags/Markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Markdown</span></a> <a href="https://mastodon.social/tags/JSON" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JSON</span></a> <a href="https://mastodon.social/tags/Popover" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Popover</span></a> <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponent</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a></p>
Tane Piper ⁂<p>The other day I mentioned I might have accidentally written a web component framework powered by <span class="h-card" translate="no"><a href="https://m.webtoo.ls/@vite" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>vite</span></a></span> Here I've written about said framework - <a href="https://mastodon.gamedev.place/@teskooano/114432752411496927" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.gamedev.place/@teskoo</span><span class="invisible">ano/114432752411496927</span></a></p><p> <a href="https://tane.codes/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponent</span></a> <a href="https://tane.codes/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://tane.codes/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>framework</span></a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponents</span></a> <a href="https://tane.codes/tags/vite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vite</span></a></p>
🔭 Teskooano<p>Version 0.2.0 of <a href="https://mastodon.gamedev.place/tags/teskooano" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>teskooano</span></a> is out!</p><p>Read about the release and the new <a href="https://mastodon.gamedev.place/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponent</span></a> <a href="https://mastodon.gamedev.place/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.gamedev.place/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>framework</span></a> I've written - now live on the site!</p><p>Also see the roadmap for upcoming plans</p><p><a href="https://teskooano.space/plan/00002/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">teskooano.space/plan/00002/</span><span class="invisible"></span></a></p><p><a href="https://mastodon.gamedev.place/tags/gamedev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gamedev</span></a> <a href="https://mastodon.gamedev.place/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.gamedev.place/tags/indieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>indieDev</span></a> <a href="https://mastodon.gamedev.place/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://mastodon.gamedev.place/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typescript</span></a></p>
Tane Piper ⁂<p>I think I've accidentally built quite a cool '<a href="https://tane.codes/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponent</span></a>-as-a-plugin' system for the <span class="h-card" translate="no"><a href="https://mastodon.gamedev.place/@teskooano" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>teskooano</span></a></span> UI - essentially two functions - one to register base components, and one to register full plugins, that are made up of one or more web components, functions and a controller. These components can self-register things like buttons in certain toolbars, or you can just add them as functions (like opening a new external URL). I'll post a bit more on it later</p>

Been building a Card component for our #DesignSystem. Trickier than you might think.

To make the card surface clickable, it uses an approach from @heydon 's excellent inclusive-components.design/ca post, albeit wrapped up as a #WebComponent that progressively enhances a link/button in the card's content.

Also taking cues from @nathanacurtis sub components post medium.com/eightshapes-llc/sub and giving our consumers a suite of building blocks to assemble whatever specialsed card variations they need.

Inclusive Components · CardsSome of the components I've explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification. It's at your discretion how closely you follow these requirements. Research may show

My #webcomponent for embedding #mastodon feeds and its demo page hcschuetz.github.io/mastodon-t got a few enhancements, for example:

1. CSS fixes. (The old styling worked in Firefox but had problems in Edge and probably also Chrome.)
2. Hide sensitive content.
3. Added a list of similar projects to the demo page.
4. And perhaps most importantly: The component configuration became both simpler and more powerful.

#webdev

1/2

hcschuetz.github.ioEmbedding Mastodon Feeds

If you have a #WebComponent with

```js
constructor() {
this.mq = matchMedia(…)
}
```

do you need to clean up any change listeners in `disconnectedCallback()`?

This was not intuitive to me, and I could imagine it going both ways.

1/2 (answer in next post)