function setPropertyElementMapping(target: any, property: string|symbol, selector: string) {
    if ( !target.exPropertyElementMapping ) {
        target.exPropertyElementMapping = []
    }

    target.exPropertyElementMapping.push({
        property,
        selector,
    })
}

export const Element = (selector: string): PropertyDecorator => {
    return (target, property) => {
        setPropertyElementMapping(target.constructor, property, selector)
    }
}

function setPropertyAttributeMapping(target: any, property: string|symbol, attribute: string) {
    if ( !target.exPropertyAttributeMapping ) {
        target.exPropertyAttributeMapping = []
    }

    target.exPropertyAttributeMapping.push({
        property,
        attribute,
    })
}

export const Attribute = (attribute?: string): PropertyDecorator => {
    return (target, property) => {
        setPropertyAttributeMapping(target.constructor, property, attribute || String(property))
    }
}

function setPropertyRendersMapping(target: any, property: string|symbol) {
    if ( !target.exPropertyRendersMapping ) {
        target.exPropertyRendersMapping = []
    }

    target.exPropertyRendersMapping.push({
        property,
    })
}

export const Renders = (): PropertyDecorator => {
    return (target, property) => {
        setPropertyRendersMapping(target.constructor, property)
    }
}

export const Component = (selector: string): ClassDecorator => {
    return (target) => {
        window.customElements.define(selector, target as any)
    }
}