https://kotlinlang.org logo
#compose-web
Title
# compose-web
n

Norbi

10/07/2021, 3:48 PM
Is there an example how web components can be integrated? I successfully rendered web components but I'm curious about the best practices eg. for assigning content to slots. Thanks.
a

Akif Abasov [JB]

10/07/2021, 4:24 PM
This is in our plans, but we haven’t any solution yet.
You can share your experience
n

Norbi

10/08/2021, 6:01 PM
@Akif Abasov [JB] nothing special was needed, the slots could be assigned as an attribute as expected:
Copy code
ToBeAssignedToSlot({
        attr("slot", "nameOfTheSlot")
    })
What I could not figure out was how to scope the slots to the given @Composable. I mean first I wanted to achieve that in a given composable context only the currently valid slots could be assigned but I could not find a solution to "scope" them. What was not obvious first is how to style the shadow DOM, finally I used this (but maybe there is a better solution):
Copy code
WebComponent({
        classes(MyStyleSheet.css {
            selector("::part(root)").style {
                paddingLeft(0.5.em)
            }
        })
    }) { ... }
One more thing: to follow the code style of the built-in Compose/Web wrappers of the HTML elements, I had to copy this function to my project because it is private:
org.jetbrains.compose.web.dom.ElementBuilderImplementation
@Akif Abasov [JB], one more thing:
SyntheticEvent
and
SyntheticMouseEvent
have
internal
constructors so they cannot be used as the superclass of web components' custom events...
a

Akif Abasov [JB]

10/11/2021, 10:30 AM
@Oleksandr Karpovich [JB] ^