Ability to use web-components as component about dom-expressions HOT 5 CLOSED

https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js#L79

Has the check for first letter to be capital

from dom-expressions.

I'm confused by the ask. Custom elements(webcomponents) are native elements so they should already work today by using all lowercase. Web Components aren't JSX components so they should fail that check. JSX components are just functions whereas web components are registered as part of the native platform.

Other tooling including TypeScript relies on this capitalization heuristic in terms of naming what is a component or not.

from dom-expressions.

I was trying to add web components directly in solid code and now if the web components props are tied to any signal it still does not auto update the prop internally as the compiled output does not handle this scenario.

After some research found out the way solid element is handling this, via creating signals for props and passing in an object with getter and setter to access the signal.

const [count, setCount] = createSignal(0);
return (
<div>
   <web-component title={count()}></web-component>
</div>
)

In this example when count changes the web-component does not reflect the changes. Not sure if this is what SolidJS should handle as it might be out of context from its perspective.

from dom-expressions.

If you have a web component that updates in response to props or attribute changes the internal mechanism doesn't have to be Signals. Solid will make sure that on signal value outside we update those properties, but your webcomponent should be able to handle those changes itself. If it doesn't watch properties you can prefix with attr: which will force attributes. See if that works for you.

from dom-expressions.

Yes, Internal Mechanism of prop updates are handled at web components. The outside world props changes were reflected using signals.

Thanks for the clarification.

from dom-expressions.