Thread
#compose-web
    n

    Norbi

    11 months ago
    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]

    11 months ago
    This is in our plans, but we haven’t any solution yet.
    You can share your experience
    n

    Norbi

    11 months ago
    @Akif Abasov [JB] nothing special was needed, the slots could be assigned as an attribute as expected:
    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):
    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]

    11 months ago
    @Oleksandr Karpovich [JB] ^