Custom Elements (Proposal)

Proposal: Custom Elements

@dataclass
class Profile(CustomElement):
    name: str = ObservedAttribute[str]()
    pic: str = ObservedAttribute[str]()
    friends: list[str] = ObservedList[str]()

    def render(self):
        """
        The Jinja this element produces using the objects attributes
        """
        return """
            <img src={{pic}}>
            <p> Hi {{name}} </p>
            <h1> Your friends </h1>
            % for friend in {{friends}} %
            <p> friend <p>
            % endfor %
        """

    def style(self):
        return {
            "padding": "10px",
        }
        # or
        return """
            padding: 10px;
        """

    def on_click(self, event):
        print("Clicked on profile: {self}")

In HTML this looks like this

<Profile>

You setup the attributes like this

Custom("Profile").setattrs({
    "name": "Michael",
    "pic": "michael.png",
    "friends": [], #😢
})