「文字化けを復元するよ」くんを CustomElement で作り直した。CustomElement 便利だなー。 tmtms.net/mojibake/

Mi aporte al universo de los frontenders: Una etiqueta HTML <select-multiple> que se ve como un dropdown y sirve para elegir múltiples opciones como CustomElement. Repo: github.com/padawanstrainer/s… #html #css #programacion #programacionweb youtu.be/qGJcw0vBVL0

And you completely ignored my point. So we’ll call it even. What you’re describing isn’t Hydration. Hydration requires a dead shell rendering to then “hydrate” into a working component. To your second point, Web Components are active as soon as the tag is parsed by the browser. They don’t need to be hydrated. Explanation: Rather than doing this: var element = new HTMLElement(); …the browser notices that there’s a custom element registered for the tag and does this: var element = new CustomElement(); When it does this: parent.appendChild(element); There’s a subtle interaction that happens where the .parentElement is set… element.parentElement = parent; …and that change triggers a setter roughly like this… set parentElement(element) { this.#parentElement = element; this.connectedCallback(); } …and the connectedCallback() to do most of your work kicks off. Of course, your element is empty at that point because the browser hasn’t parsed it. I solved this in my Emirgance framework with a mutation listener and even wrote an article on how this works. (Link below due to X being difficult today.)

#wixstudio でローディングボタンがなかったので 作ってみた I created a loading button #CustomElement #javascript #web制作

Yes, you can actually. The only real gotcha is for including styles for nested components. But you can handle this in your Vite config by setting customElement to true so that Vue treats all components as a custom element

Vue3.2以降のCustomElement吐ける公式機能ではなくバニラJSなやつに変換してる？ #vuefes_tskaigi

I wrote a customElement for #shopify liquid and this is easier than writing Lit. Shopify liquid templating and theme dev isn't hard, the tough part is planning how the client will use it, and how to create sections, settings and block for your store, and also the consideration of the type of store to build. Each store is meant to be unique to an industry, so nothing like the likes of Avada multipurpose store.

Almost there 😄 SWTL will be able to SSR custom elements. The customElementRenderer is pluggable, so it supports @buildWithLit , but could probably support @enhance_dev `CustomElement`s as well, or other custom element renderers

customelement知らなかった

kuc-buttonタグをcustomElementで使えると思ったんだけど、そっちも無理やった。なんでー？

Named slots were getting compiled out of our components, so we had to find a workaround for it. The removal of `get_current_component` made it more difficult to get the hostElement, so we have a more complex impl using the customElement attribute off svelte:options.

そろそろcustomElement触りたいよね

Les amis, @romainlanz en particulier, est-ce que vous avez déjà eu à foutre une App VueJS en entier dans un customElement ? Pour éviter que le CSS s'échappe sur la page hôte ?

None. HTML CSS customElement

I like working with Web Components, but I got tired of using setters and getters, the verbose lifecycle methods, and a few other little things. So, I wrote a simple CustomElement abstraction. - Properties are defined using a static property called bindables (borrowed Lit's syntax for defining the primitive types) - Styles are defined using a static styles method - A render function is where you define your HTML - connectedCallback has been changed to attached - disconnectedCallback has been changed to detached - Bindables have change callbacks. Eg. nameChanged, ageChanged I provided an example of how you can use the abstraction to make creating Web Components easier, and the code is on CodePen: codepen.io/DigitalSea/pen/eY…

前提として、JSでrenderはしない想定で書いてますね。なので通常のHTMLタグと差はない認識で、CustomElementはEventの管理のフックとして使うイメージです。ConnectedCallbackがある分jQueryより少し楽に感じてます。

Svelte 4リリース。 Node.js 14のサポート終了、CJSの出力は廃止しESMのみをサポートするように、Custom Elementsの対応を`tag`オプションから`customElement`オプションに変更。 生成するファイルサイズの削減、ウェブサイトのドキュメントを刷新など "Announcing Svelt…" svelte.dev/blog/svelte-4

Ready for another episode of askUI bytes? 🤓 👌 Today, learn how to use customElement()-detection to select unique UI elements that askUI may not recognize with ease.  🔎 #askuiBytes #UIAutomation youtu.be/L8NvejURKnA

One clear case where setters are typically needed is for Web Components. CustomElement attributes are typically set declaratively via HTML and they always *appear* to be properties. However, you will want to know whenever such a value changes, so you'll use a setter.

Should I make a customElement binding for silmaril?🤔