Recent searches

No recent searches

Search options

Only available when logged in.
shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.

Administered by:

Server stats:

268
active users

shakedown.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0

#shadowdom

0 posts0 participants0 posts today
Brandon Zhang 🇨🇳<p><a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> people, in this Codepen that I set up for testing, the dialog inside the <a href="https://mastodon.online/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ShadowDOM</span></a> cannot be open by its sibling button even enough they're connected by correct ID attribute. <br>Is this expected or am I missing something here?</p><p><a href="https://codepen.io/brandonzhang/pen/QwwXXmL" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/brandonzhang/pen/Qw</span><span class="invisible">wXXmL</span></a></p>
Aral Balkan<p>New Kitten release</p><p>• Now leaves &lt;style&gt; tags within &lt;template&gt; tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.</p><p>(Kitten’s Streaming HTML workflow¹ – which uses htmx and WebSockets under the hood – combined with built-in support for slots, etc., in Kitten components² means the use of declarative shadow DOM is mostly useful if you want scoped styles. Ideally, of course, use classes to scope styles to your components and be specific in your CSS selectors in general so as not to pollute elements in your components. Although that’s a bit like saying you should floss everyday. Yeah, we all know we should…) :)</p><p>Update: All that said, I’d highly recommend you don’t use Shadow DOM in your Kitten apps. For one thing, htmx’s WebSocket extension doesn’t seem to play well with it. And for another, you really don’t need it and definitely not just to get scoped CSS.</p><p>Enjoy!</p><p>:kitten:💕</p><p>¹ <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/streaming-html/</span></a><br>² <a href="https://kitten.small-web.org/tutorials/components-and-fragments/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/components-and-fragments/</span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/CSSScoping" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSScoping</span></a> <a href="https://mastodon.ar.al/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ShadowDOM</span></a> <a href="https://mastodon.ar.al/tags/shadowRoot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>shadowRoot</span></a> <a href="https://mastodon.ar.al/tags/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DOM</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.ar.al/tags/style" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>style</span></a> <a href="https://mastodon.ar.al/tags/template" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>template</span></a> <a href="https://mastodon.ar.al/tags/declarativeShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>declarativeShadowDOM</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>NodeJS</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a></p>
westbrook

In that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:

blog.westbrookjohnson.com/patt

Catch up on some techniques for managing connection time work in a custom element. 😁 There's even reasons for using shadow DOM hidden in there. 😱

Thanks @nachtfunke for starting the convo on this and @zachleat for challenging a toot into a full on blog dump. 🙇

blog.westbrookjohnson.comI'm feeling so disconnected
#customElements#webComponents#shadowDOM
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-draftsBy keithamus
Continued thread
*
GENKI

#RiotJS で #WebComponents なサンプル作りを昨夜試して、色々 riotjs/custom-elements のバグっぽい挙動も報告できたので良かったんだけど、#WebComponents の属性値に基本テキストしか渡せないのは、やはり感覚的にはちょっと不便に感じる時あるな…props バケツリレーすればとりあえずなんとかなるかなみたいになっちゃってる自分が良くないかもなので別のパターンを学ぶ良いきっかけかもしれないけど。
#CSS が外部に伝搬しない #shadowDOM は使い方次第ではすごい強力な気はしている。

#WebComponentsb の template の書きづらさは Riot みたいなコンポーネントベースのフレームワークを使って解決するほうがよさそうだなと思ってるけど、標準技術の中でもう少し柔軟に書けるようになる予定とかないんだろうか…構造がある程度複雑になると、フレームワーク使わずにやろうとすると #HTML 側に template で書いておいて #JS 側から getElementById するみたいなやり方しか自分は思いついてないんだけど、できればコンポーネントはコンポーネントとして別ファイル化したいし… #PHP とかフロント以外のところでコンポーネント用の template を分けておけばいいのかもしれないけどなんかそれもなあとか考え事をしながら人間ドックに向かっている朝。

Jesse Jurman

Small declarative web-component for loading fonts in Shadow DOM, especially useful for components that want to load an icon using a font library!

github.com/JRJurman/use-font

Admittedly, it is so tiny, that you could just copy-paste the code for most projects, but it is a good reference point for anyone looking for something similar!

GitHubGitHub - JRJurman/use-font: Web Component for declarative font loading in Shadow DOM.Web Component for declarative font loading in Shadow DOM. - JRJurman/use-font
#WebComponents#ShadowDOM
🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸

> Global CSS doesn’t bleed into the shadow DOM (which is the point), but that means that your design system can now no longer benefit from having a global CSS file or take advantage of the cascade.

> Each item is its own discreet thing, so you’re repeating your styles a lot more across each one with shared design aspects.

This feels kinda strawmanny to me. Multiple ShadowDOMs can include the same CSS file.

gomakethings.com/design-system

gomakethings.comDesign systems are bad use case for the Shadow DOM in Web Components, actuallyI think the shadow DOM is an anti-pattern. One of the big “use cases” for it that I hear people bring up is in design systems, where you might not want people messing with the HTML or CSS and breaking your intended UI. A few years ago, I was one of those people! But a design system is, in my opinion, a great example of where the Shadow DOM actually fails hard.
#webComponents#shadowDOM#webDev
Continued thread
GENKI

これやっぱり自分が確認できる現存のサイトで見てる限り、#Webcomponents の #ShadowDOM であること自体は別に #Google のクロールにはさほど有利な影響はないような気がする。

というかそれを確認しててむしろもっと驚いたのは、#RiotJS のインプラウザコンパイル（プリコンパイルなしで compiler 含む JS を読み込んでブラウザ側で .riot ファイルを #JavaScript にコンパイルしてからマウントする方法）でマウントした要素もちゃんとクロールされてたこと :tony_normal:

GENKI

#Google では #WebComponents の #ShadowDOM がちゃんとレンダリングされた状態でクロールされるっていう記事だけど、#Google はもともと #JavaScript をある程度は実行してくれるからという話じゃないのかなこれ。
Web標準の #WebComponents だからよりクロールされやすいみたいなことが起きてるのかどうかはこれ読むだけだとまだわからない気がする…

昔 #RiotJS で作ったコンポーネントも展開された状態でクロールされてたし、 #JS の処理の重さによっても変わりそう… #Google のクローラーがそこまで長い時間 #JS を実行してくれるわけもなさそうだし…

dev.to/stuffbreaker/seo-and-we

DEV CommunitySEO and Web Components - 2023 EditionThis post includes some important updates about web components and search engine optimization (SEO)
TrendingLive feeds
About