Native DOM Typings

[tomrav]

Ability to extend the native DOM elements

• Final states - states that cannot be override (e.g. input:disabled)
• ...

[barak007]

(WIP)

Why?

• Enable stricter approach for class placement and composition (multiple types in same chunk e.g .x.y.z)
• Open the door for better native css language services based on Stylable
• Everything should have a type

There are multiple propositions behind this feature:

1. Add ability to define native DOM elements types in .st.css files
2. Add ability to extends classes (and attributes?) with native DOM elements
3. Provide all the native DOM elements type definitions
4. Use the type definitions to provide completions

Idea for how to type:

Create a base DOM Element type definition that will expose:

• All native states that are not specific
• Pseudo elements (basically only before and after)
• Possible common attributes

For each DOM element that have specific states/attributes/pseudo-elements (like input, video, form) create a type that extends the Element base type

Untouched topics

• Final states to prevent component from overriding native states

Nice to have:

• Runtime errors for wrong placement of classes (same as extends error)

Possible issues:

• -st-extends syntax collision between classes and elements
• DOM types might be hard to implement without union/intersection types

Tasks

• [ ] Create a package that will contain the DOM types probably @stylable/dom-types
• [ ] Implement base Element type
• [ ] Implement all native DOM elements types
• [ ] Add ability to automatically include these types in the global scope?
• [ ] ...