C class
FormField extends KompElement

Base class for form-associated custom elements. Extends KompElement with ElementInternals support for native form participation, validation, and submission.

Example

class MyInput extends FormField {
    static tagName = 'my-input'
    static { this.define() }
}

Constructor


new FormField()

options :


            
                Object

optional

content :


            
                string
                |
            
                HTMLElement
                |
            
                Array
                |
            
                Object

optional

content to append to element. Passed to Dolla's content

Instance Properties


form

The form this element is associated with, if any


validationMessage

The validation message for this element


validity

The ValidityState of this element

Static Properties


assignableAttributes: 
            
                Object

Attributes settable via constructor options. Each key is the attribute name and the value is a schema object describing how to handle it.

Example

static assignableAttributes = {
    anchor: { type: 'HTMLElement', default: null, null: true },
    placement: { type: 'string', default: 'bottom', null: false },
    enabled: { type: 'boolean', default: true, null: false },
    data: { type: 'array', default: [], null: false }
}

Properties

type :


            
                string
                |
            
                Array.<string>

expected type(s): 'string', 'number', 'boolean', 'object', 'array', 'function', or a class/element name like 'HTMLElement'

default :

default value when none is provided

null :


            
                boolean

whether null is an acceptable value

load :


            
                function

optional

optional transform applied when reading the attribute value


assignableMethods: 
            
                Array

Methods overridable via constructor options


bindMethods: 
            
                Array

Methods to auto-bind to this


events: 
            
                Array

Event names that can be bound via onEventName constructor options


style: 
            
                string

CSS injected once per component via adoptedStyleSheets


styleLayer: 
            
                string
                |
            
                false

CSS @layer name used to wrap the component's styles when injected via adoptedStyleSheets. Set to a falsy value to disable layering.


watch: 
            
                Array

Attributes to observe for changes. Triggers changed(attribute, was, now) and [attribute]Changed(was, now) callbacks.

Instance Methods


addEventListenerFor(element, eventType, args)

Listen for events on another element, automatically cleaned up when this component disconnects

Parameters

element :


            
                HTMLElement

element to listen on

eventType :


            
                string

event type

args :

additional arguments passed to addEventListener


changed(attribute, was, now)

Called every time an observed attribute changes. Attribute must be listed in static watch.

Parameters

attribute :


            
                string

the attribute that changed

was :

previous value

now :

new value


checkValidity()
    
    
    
        →
        
            
                
                    boolean

Check validity without showing UI

Returns


                        
                            boolean


connected()

Called when element is connected to the DOM


disconnected()

Called when element is disconnected from the DOM


formResetCallback()

Called when the associated form is reset. Override in subclasses.


formStateRestoreCallback(state, mode)

Called when the browser restores form state. Override in subclasses.

Parameters

state :

the restored state

mode :


            
                string

'restore' or 'autocomplete'


initialize()

Called once per instantiation, but only after element is connected to the DOM


remove(callback)
    
    
    
        →
        
            
                
                    KompElement

Remove element. Fires remove, calls optional callback, removes from DOM, then fires removed.

Parameters

callback :


            
                function

optional

async callback called between remove and removed

Returns


                        
                            KompElement

this


reportValidity()
    
    
    
        →
        
            
                
                    boolean

Check validity and show browser validation UI if invalid

Returns


                        
                            boolean


setFormValue(value)

Set the form value for this element

Parameters

value :

the value to submit with the form


setValidity(flags, message, anchor)

Set the validity of this element

Parameters

flags :


            
                Object

ValidityStateFlags object

message :


            
                string

optional

validation message

anchor :


            
                HTMLElement

optional

element to anchor validation UI to


trigger(eventName, args)

Trigger an event on this element

Parameters

eventName :


            
                string

event name to trigger

args :

additional arguments

Events


connect

Fired before the element is connected to the DOM (cancellable)


connected

Fired after the element is connected to the DOM and initialized


disconnect

Fired before the element is disconnected from the DOM (cancellable)


disconnected

Fired after the element is disconnected from the DOM


remove

Fired before the element is removed (cancellable)


removed

Fired after the element is removed