Ability to use web-components as component

[saivishwak]

If we have a web component its naming spec says that the name should not start with a Captial letter. Due to this the ability to use web-components as components is restricted.

Can we extend the component naming spec to support web-components? This will give us the ability to embed web components in solid js components.

example -

<div>
   <cusomt-component title={"hello"}/>
</div>

Web component naming spec - https://html.spec.whatwg.org/#valid-custom-element-name

Thank You

[saivishwak]

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

[ryansolid]

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.

[saivishwak]

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.

[ryansolid]

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.

[saivishwak]

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

Thanks for the clarification.