Hooking ans styling Surface's built-in components using the new ways

Phoenix Forum Questions / Help
,
1

I am trying out hooks.js and scoped CSS functionalities introduced in 0.8+ Surface, and have a few questions wrt. hooks and styling on built in components like Form etc.

  • how do I attach a hook to a built-in component that is instantiated in my custom component? :hook only works on HTML elements. Not all components are html element but Form is. So theoretically I should be able to attach a hook to a Form, but it is not obvious how to do that
  • how do I style a built-in component that is instantiated in my custom component, using a scoped CSS? The data-s-* are not inherited by sub components. So a built-in component become un-styled by the scooped CSS.

Thanks in advance!

2

The first problem can be work around by adding opts={"phx-hook": "MyComponentName#default"} to the built-in components. It is a bit ugly though.

I still haven’t figured out how to deal with second problem though. I wanted to manufacture a data-s-* attribute but I can’t figure out how to get the auto-generated magic style token from within the elixir code.