duck.html.components.style

Style HTML Component.

This module defines a reusable Style component for embedding CSS styles within an HTML document.

Module Contents

Classes

Style

Style HTML Component.

API

class duck.html.components.style.Style(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)

Bases: duck.html.components.InnerComponent

Style HTML Component.

The Style component allows developers to define and embed custom CSS styles directly within an HTML page. It can be used to dynamically style elements without needing an external stylesheet.

Features:

• Supports inline CSS.

• Can be dynamically added to any component.

• Enables styling customization for other components.

Example Usage:

style = Style(
    inner_html='''
        .custom-popup {
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
        }
    '''
)
component.add_child(style)

This will generate the following HTML output:

<style>
    .custom-popup {
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 10px;
        border-radius: 5px;
    }
</style>

Notes:

• Automatic Nonce Addition: When ENABLE_HEADERS_SECURITY_POLICY=True and csp_nonce_flag is set in CSP_TRUSTED_SOURCES, the nonce property is automatically added.

• Request Resolution Required: For the nonce to be set automatically, the request must be resolved. This is achieved by calling get_request_or_raise on the component root (or the current component if the root is None).

• The inner_html parameter must contain valid CSS code.

• This component is intended for inline styles and does not support linking to external CSS files.

• Styles defined within this component will apply globally unless scoped using class or ID selectors.

Initialization

Initialize an HTML component.

Parameters:

• element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.

• accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).

• inner_html – Inner html to add to the HTML component. Defaults to None.

• properties – Dictionary for properties to initialize the component with.

• props – Just same as properties argument (added for simplicity).

• style – Dictionary for style to initialize the component with.

• **kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

get_element()

Returns the HTML tag for the component.

property properties

set_csp_nonce()

This tries to retrieve current request nonce.