mastodontech.de ist einer von vielen unabhängigen Mastodon-Servern, mit dem du dich im Fediverse beteiligen kannst.
Offen für alle (über 16) und bereitgestellt von Markus'Blog

Serverstatistik:

1,5 Tsd.
aktive Profile

#webcomponent

0 Beiträge0 Beteiligte0 Beiträge heute

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:

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.

Or, alternately, what I can tell the developer to do differently to make it work. It says it can't find "HTMLElement".

Are Web Components & Cybersecurity A Better Combo?

I'm not trying to dunk on popular #UI #frameworks – I'm sure they're totally fine for #cybersecurity stuff, probably get loads of reviews and #audits.

But from my angle: Web Components are *native* to the #browser. Doesn't that just inherently reduce the risk of **#SupplyChainAttacks** (you know, like a rogue `npm install` on a bad network) for your #AppSecurity?

Or am I overthinking it, and the #framework choice is less important than the #browser, #OS, or #device running it? What are your thoughts, #DevCommunity?

---

Quick context: I've got a #ReactJS #messagingApp (repo here: github.com/positive-intentions) and a separate #UIFramework (repo here: github.com/positive-intentions) built with #Lit (which uses Web Components). I'm genuinely wondering if there's a compelling #cybersecurity reason to refactor the chat app to use my #WebComponent UI framework. Might be a whole new level of #SecurityByDesign for #FrontEndDev.

FYI, same question's on Reddit here: reddit.com/r/ExperiencedDevs/c, got some good #insights, but want to make sure nothing's getting overlooked! Let's discuss #InfoSec #WebDev #JavaScript #OpenSource #TechQuestion.

GitHubGitHub - positive-intentions/chat: Decentralized chatDecentralized chat. Contribute to positive-intentions/chat development by creating an account on GitHub.

thanks to a discussion on reddit [1] and some links [2] I came across a different view on .
In short, just wrap content in a instead of trying to "upgrade" it. Like so:

<user-avatar>
<img src>
</user-avatar>

I always thought until now that it should rather be

<img src is=user-avatar>

but `is` is not widely usable.
I still need to digest it. I see the use cases, but somehow feels still strange

[1] reddit.com/r/HTML/comments/1ld
[2] adactio.com/journal/20618

Antwortete im Thread

@matuzo Shadow DOM isn’t the only part of the platform that #webComponent popularity is adding pressure on automated tools to support. Things like Element Internals are getting left off the menu in many places, like github.com/dequelabs/axe-core/, just as they and soon things like Reference Targets start to expand as well. 🥺

GitHubCustom Elements using `ElementInternals` to set `role` are flagged when `aria-label` is provided · Issue #4259 · dequelabs/axe-coreVon DRiFTy17

I think I've accidentally built quite a cool '#webComponent-as-a-plugin' system for the @teskooano 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

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)

This is a re-post since I don't see Keith on here:

Call to action for #WebComponent / #ShadowDOM fans: I've added an experimental flag to Firefox lifting the restriction on adoptedStyleSheets, meaning shadowroots can adopt `link.sheet` or `style.sheet`.

Please try this out, and let me know if you encounter issues!
github.com/w3c/csswg-drafts/is

GitHub[cssom] Can we lift the restriction on constructed flag for adoptedStylesheets? · Issue #10013 · w3c/csswg-draftsVon keithamus

github.com/w3c/csswg-drafts/is

Call to action for #WebComponent / #ShadowDOM fans: I've added an experimental flag to Firefox lifting the restriction on adoptedStyleSheets, meaning shadowroots can adopt `link.sheet` or `style.sheet`.

Please try this out, and let me know if you encounter issues!

GitHub[cssom] Can we lift the restriction on constructed flag for adoptedStylesheets? · Issue #10013 · w3c/csswg-draftsVon keithamus