Deriving new elements
=====================

The simplest way to subclass *Element* is to define the *inner_html* attribute::

    import alfred3.element_responsive as el

    class NewElement(el.Element):

        inner_html = "Element html goes <b>here</b>"

For most cases, you will want some additional control. Maybe you even
want to use your own jinja template. In this case, add the template
as a class variable and add the values that you want to hand over
to the template in a `template_data` property::

    import alfred3.element_responsive as el
    from jinja2 import Template

    class NewElement(el.Element):
        element_template = Template("Element html goes <b>{{ text }}</b>")

        @property
        def template_data(self):
            d = super().template_data   # collect basic template data
            d["text"] = "here"          # add custom values
            return d                    # don't forget to return the dictionary

Both of the above methods utilise alfred's basic element html
template and inject your code into it, which allows the basic layout
and logic to simply translate to your new element. If your new
Element has its own *__init__* constructor method, you can pass
specific arguments or all available arguments on to the Element
base class::

    # define new argument 'myarg' and save it as an attribute
    # set a new default for argument width and pass it on to the
    # Element base class allow all other valid keyword arguments for
    # the Element base class and pass them on ('**kwargs')

    import alfred3.element_responsive as el

    class NewElement(el.Element):

        def __init__(self, myarg: str = "test", width: str = "narrow", **kwargs):
            super().__init__(width=width, **kwargs)
            self.myarg = myarg


.. note::
    All elements that are derived in this way receive a CSS class
    of their class name, which can be used for css styling (i.e. a
    new element 'ExampleElement' receives the CSS class
    'ExampleElement'). Further, all elements receive a html element
    ID of the form 'elid-<name>', where <name> is replaced by the
    element's name attribute. This can be used to style individual
    elements via CSS.

If you want full control over the element's html template, you can
redefine the *web_widget* property. This will overwrite the
basic html layouting functionality. Example::

    class NewElement(Element):

        @property
        def web_widget(self):
            return "This property should return your full desired code."
