Shakedown Social

0 posts0 participants0 posts today

Brandon Zhang 🇨🇳<a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</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 noreferrer" target="_blank">#ShadowDOM</a> cannot be open by its sibling button even enough they're connected by correct ID attribute. Is this expected or am I missing something here?<a href="https://codepen.io/brandonzhang/pen/QwwXXmL" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/brandonzhang/pen/QwwXXmL</a>

Aral BalkanNew Kitten release• Now leaves <style> tags within <template> tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.(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…) :)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.Enjoy!:kitten:💕¹ <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</a> ² <a href="https://kitten.small-web.org/tutorials/components-and-fragments/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/components-and-fragments/</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/CSSScoping" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSScoping</a> <a href="https://mastodon.ar.al/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://mastodon.ar.al/tags/shadowRoot" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowRoot</a> <a href="https://mastodon.ar.al/tags/DOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DOM</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> <a href="https://mastodon.ar.al/tags/style" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#style</a> <a href="https://mastodon.ar.al/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#template</a> <a href="https://mastodon.ar.al/tags/declarativeShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#declarativeShadowDOM</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

westbrookIn that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:<a href="https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/</a>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 <a href="https://mastodon.social/@zachleat" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@zachleat</a> for challenging a toot into a full on blog dump. 🙇 <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a> <a href="https://mastodon.social/tags/moveBefore" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#moveBefore</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a>

westbrook<a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@zachleat</a> <a href="https://indieweb.social/@nachtfunke" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@nachtfunke</a> I'm not saying this is because I didn't get you anything for your birthday, but I'm also not saying it isn't because of that...<a href="https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/</a><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponentsCG</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a>

keithamus<a href="https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385</a>Call to action for <a href="https://indieweb.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponent</a> / <a href="https://indieweb.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> 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!

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸I think <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> vars are good enough for bridging styles from a page into it's <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a>' <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a><a href="https://mastodon.social/tags/unpopularOpinion" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#unpopularOpinion</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/styling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#styling</a>

westbrookI’ve never had stress around putting all my <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> for all of my <a href="https://mastodon.social/tags/webComponent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponent</a> in their <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a>… ask me anything.

GENKI<a href="https://social.vivaldi.net/tags/RiotJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RiotJS</a> で <a href="https://social.vivaldi.net/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> なサンプル作りを昨夜試して、色々 riotjs/custom-elements のバグっぽい挙動も報告できたので良かったんだけど、<a href="https://social.vivaldi.net/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> の属性値に基本テキストしか渡せないのは、やはり感覚的にはちょっと不便に感じる時あるな…props バケツリレーすればとりあえずなんとかなるかなみたいになっちゃってる自分が良くないかもなので別のパターンを学ぶ良いきっかけかもしれないけど。 <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> が外部に伝搬しない <a href="https://social.vivaldi.net/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a> は使い方次第ではすごい強力な気はしている。<a href="https://social.vivaldi.net/tags/WebComponentsb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponentsb</a> の template の書きづらさは Riot みたいなコンポーネントベースのフレームワークを使って解決するほうがよさそうだなと思ってるけど、標準技術の中でもう少し柔軟に書けるようになる予定とかないんだろうか…構造がある程度複雑になると、フレームワーク使わずにやろうとすると <a href="https://social.vivaldi.net/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> 側に template で書いておいて <a href="https://social.vivaldi.net/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> 側から getElementById するみたいなやり方しか自分は思いついてないんだけど、できればコンポーネントはコンポーネントとして別ファイル化したいし… <a href="https://social.vivaldi.net/tags/PHP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PHP</a> とかフロント以外のところでコンポーネント用の template を分けておけばいいのかもしれないけどなんかそれもなあとか考え事をしながら人間ドックに向かっている朝。

westbrookHrm. <a href="https://mastodon.social/tags/viewTransitions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#viewTransitions</a> and <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a> …discuss. <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponentsCG</a>

Jesse JurmanSmall declarative web-component for loading fonts in Shadow DOM, especially useful for components that want to load an icon using a font library!<a href="https://github.com/JRJurman/use-font" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/JRJurman/use-font</a>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!<a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸Using <a href="https://mastodon.social/tags/DeclarativeShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DeclarativeShadowDOM</a> to render placeholder content that gets replaced later as the <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/streams" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#streams</a> in with no <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>!<a href="https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/</a>This is an interesting technique, but it has limitations in that you can't close the <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElement</a> until you've loaded the content.<a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/shadowDom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDom</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/http" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#http</a> <a href="https://mastodon.social/tags/streaming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#streaming</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸Good reason to avoid ShadowDOM: "it breaks html forms"Bad reason: "I like global CSS"<a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/forms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#forms</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸I'm of the opinion that the <a href="https://mastodon.social/tags/cascade" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cascade</a> was a mistake, for the same reason that <a href="https://mastodon.social/tags/OOP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OOP</a> was a mistake; <a href="https://mastodon.social/tags/inheritance" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#inheritance</a> is too implicit. How much time have we wasted with things like <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> resets, !important, <a href="https://mastodon.social/tags/BEM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BEM</a>, etc just faffing about with <a href="https://mastodon.social/tags/specificity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#specificity</a> trying to make styles apply? For what? A few bytes of duplication?<a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/styling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#styling</a> <a href="https://mastodon.social/tags/shadowDom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDom</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸> 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.<a href="https://gomakethings.com/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://gomakethings.com/design-systems-are-bad-use-case-for-the-shadow-dom-in-web-components-actually/</a><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Nathan Knowler🌶️ “HTML Web Components” are an antipattern if our goal is to create custom *HTML* elements like what we find in *HTML*.<a href="https://knowler.dev/blog/html-web-components-are-an-antipattern" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://knowler.dev/blog/html-web-components-are-an-antipattern</a><a href="https://sunny.garden/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://sunny.garden/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://sunny.garden/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a>

Tixie SalanderHmm I'm wondering if declarative Shadow DOM in Web Components would open the path to new patterns of making nicer without-JS-fallback than with <noscript> elementsBut some experiment gonna be… as always… for some other days<a href="https://mastodon.guerilla.studio/tags/WebComponent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponent</a> <a href="https://mastodon.guerilla.studio/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://mastodon.guerilla.studio/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a>

Nathan KnowlerHave you ever wished the Shadow DOM had greater styling flexibility? Come share your story so we can fix that.<a href="https://github.com/w3c/webcomponents-cg/discussions/92" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/w3c/webcomponents-cg/discussions/92</a>(Please share for reach, thanks!) <a href="https://sunny.garden/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://sunny.garden/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://sunny.garden/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://sunny.garden/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://sunny.garden/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a>

GENKIこれやっぱり自分が確認できる現存のサイトで見てる限り、<a href="https://social.vivaldi.net/tags/Webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Webcomponents</a> の <a href="https://social.vivaldi.net/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> であること自体は別に <a href="https://social.vivaldi.net/tags/Google" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Google</a> のクロールにはさほど有利な影響はないような気がする。というかそれを確認しててむしろもっと驚いたのは、<a href="https://social.vivaldi.net/tags/RiotJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RiotJS</a> のインプラウザコンパイル（プリコンパイルなしで compiler 含む JS を読み込んでブラウザ側で .riot ファイルを <a href="https://social.vivaldi.net/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> にコンパイルしてからマウントする方法）でマウントした要素もちゃんとクロールされてたこと :tony_normal:

GENKI<a href="https://social.vivaldi.net/tags/Google" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Google</a> では <a href="https://social.vivaldi.net/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> の <a href="https://social.vivaldi.net/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> がちゃんとレンダリングされた状態でクロールされるっていう記事だけど、<a href="https://social.vivaldi.net/tags/Google" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Google</a> はもともと <a href="https://social.vivaldi.net/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> をある程度は実行してくれるからという話じゃないのかなこれ。 Web標準の <a href="https://social.vivaldi.net/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> だからよりクロールされやすいみたいなことが起きてるのかどうかはこれ読むだけだとまだわからない気がする…昔 <a href="https://social.vivaldi.net/tags/RiotJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RiotJS</a> で作ったコンポーネントも展開された状態でクロールされてたし、 <a href="https://social.vivaldi.net/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> の処理の重さによっても変わりそう… <a href="https://social.vivaldi.net/tags/Google" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Google</a> のクローラーがそこまで長い時間 <a href="https://social.vivaldi.net/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> を実行してくれるわけもなさそうだし…<a href="https://dev.to/stuffbreaker/seo-and-web-components-2023-edition-3l6i" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://dev.to/stuffbreaker/seo-and-web-components-2023-edition-3l6i</a>

Nathan KnowlerDevelopers think about styling the shadow DOM upside down: they approach it from a DOM/inheritance perspective instead of a cascade perspective.<a href="https://sunny.garden/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://sunny.garden/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://sunny.garden/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Recent searches

Search options

Administered by:

Server stats:

#shadowdom