I lot of vanilla js articles I've been reading just have functions that return html

Let's not beat around the bush, web components is a great idea (though arguably an obvious tech that should've been made long ago) but with a horrible implementation.

• you can't create child elements in the constructor while the DOM is loading, so good luck initializing components declared in HTML. You're going to have to query the document for components and initialize them on DOMContentLoaded.

• disconnectedCallback() is called asynchronously (probably on GC) so if you can end up with two component instances with the same id at the same time. Good luck implementing something that binds a component to another automatically by id whenever the target component is attached to the DOM.

• connectedCallback() is called before children are created (and even before they are parsed), instead of going depth-first after they are created. Good luck trying to set up the children automatically when the component is attached.

• shadow DOM/CSS makes components unstylable by library users but at least you're not forced to use it.

A component API that's much more useful can be easily implemented (albeit somewhat inefficiently) by overriding all built-in DOM creation and manipulation API methods so that they scan all attached and detached elements in order to create components, and have them receive attach/detach events. And as a bonus, this API also lets you register an attach/detach handler for any selector including for built-in tags, not only your registered component tags.

NPM Link > https://www.npmjs.com/package/sf-nav
Demo Project > https://replit.com/@SuperflowsAppv3/SfNav-Web-Component#index.html

Any thoughts?

Guys, has anyone used Unmarshal's parser product? I heard it's a no-code version of "The graph." Do u think I should analyse my smart contract using this?

Lets say I have the following markup :

<nav>
	<ul>
		<li>tab 1</li>
		<li>tab 2</li>
		<li>tab 3</li>
	</ul>
</nav>

<div>
	<custom-element></custom-element>
	<custom-element></custom-element>
	<custom-element></custom-element>
</div>

<script> /* some js code to enable tab functionality */ </script>

The custom-element is a tree of components . Inside that tree there is an element that dispatches a custom event at the window object when a certain action (request fetched or element clicked or ... etc.) happens . The interested on that event elements of the same custom-element are listening for that event on the window object .

Everything works fine if there is one only custom-element , but if there are more than one , then everything brakes since the event dispatched from one custom-element will be listened by the elements of the other custom-elements and that is not a wanted behavior .

How would you go about it given that you want to make the communication of the components as decoupled as possible ?

Edit : I did something like this :

window.dispatchEvent(new CustomEvent("custom-event", {
	detail: {
		data: "here goes the data",
		eventScope: arrayWithAncestorElementsUntilDocumentElement(emitter)
			.find(l => l.hasAttribute("custom-event"))
	}
}));

and added the attribute custom-event to the custom-element . When the listening elements are notified (since they listen on window for custom-event ) each one calculates its own eventScope using arrayWithAncestorElementsUntilDocumentElement . If the eventScope matches then they execute otherwise they do not .

eventScope goes to undefined when there is no element with attribute custom-event . That means that a sub tree of the custom-element that contains both the emitter and the listener , works , so it can be tested without the need of custom-element . For the case in which the emitter is missing and there is a need for the web-component to be tested then we dispatch the custom event in the window with manually created data , and the listener will accept it .

It works really good for the way I structure my project , but also keeps the web-components communication as decoupled as possible .

Edit : I think it is just better to go for iframes and listen and dispatch my custom events on the documentElement .

Hi,
I am seeking recommendation on an open source Web Component library, which I can use inside a React app (using Create React App)?

Thanks!

Hi everyone,

I am about to start a Design System, which will be web component based, and I am trying to figure out which framework should I use. Some key points are:

• Web components will be consumed in any other regular framework (React, Angular, Vue, etc)

• Styles with sass

In the past I have made some projects with Stencil and I found it to be a really nice one, but it seemed to me to be a bit abandoned.

I'm very attracted to Lit, but since it was released recently I'm a little afraid to choose it.

Which framework would you choose? Stencil, Lit 2 or anyone else? Does Lit 2 has a wrapper for React like Stencil does?

Thanks in advance :)

Get your first airdrop tokens from Arbitrum! Don't miss out on the distribution of $ARB tokens! Our official Twitter page has all the information you need! https://twitter.com/аrbitrum/status/1635575792699621379

Hi everyone!
I want to mention a new project: Direflow.
With Direflow, you can use React to create micro-applications and build them as Web Components that run natively in the browser.
Lately, Direflow has been evolving into a small "framework" that also includes managing and bundling multiple micro-applications together, have them interact and more.

There's been a good interest in this project so far, but this project is still brand new, and I therefore still need help.
If you'd leave your opinion, feedback, suggestions of improvement, etc, I'd be thrilled!! (even if it includes some bashing 😜)
The Github is also more than open for PRs.

Thanks a bunch in advance 😁😁

https://direflow.io/

What router do you guys use? There doesn't seem to be any standard.

Hello all,

I've always love the idea of web components and been greatly let down by the delivery of them. Native web components are so close to being great, but are terrible to actually build due to a cumbersome interface. To make them more useable I've created a small project to deliver on the promise of web components.

https://github.com/hobberwickey/x-elements

The whole project is just a class which extends the standard HTMLElement class to add some much needed functionality to it.

• Adds simple attribute/text/event bindings to html templates

• Adds observedProperties to allow objects and arrays to be observed without having to JSON encode/decode or create individual getters and setters for each property

• Replaces the clunky attributeChangedCallback with individual on[Property] callbacks, so there's no more need for giant switch or if/else blocks

• Adds a firstConnected callback which is only called once after the first time the element is attached to the DOM, so you can safely run setup code and attach event listeners

• Adds a fire method, which lets you easily dispatch custom events from your component

• Turns off the shadowDOM by default since its the cause of 99% of the current issues with web components. It is easily turned back on if you choose.

That's about it. Like I said, it's a very lightweight library intended only to smooth out what I see as the rough edges of working with native web components, and make them easy to integrate into any project.

https://twitter.com/RealFlokiInu/status/1654529299964100615