o0101 / -

Hyphen - An elegant custom element base class

Home Page:https://o0101.github.io/-/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

changes v1.1

o0101 opened this issue · comments

commented
  • maintain focus (idea is to detect focus relevant events within the custom baseclass, and determine whether the non custom element children of that class possess the focus using a simply shadow.activeElement check, and if so, construct a selector for that relative to shadow (best effort) which will then be used to post-render reinstate focus. In cases where this auto affordance fails, instead we provide (sth like): onElementFocus instance listener that you can use to set some internal property that can be then used to manually set focus to the correct post-render analog of the pre-render element (if it still exists), or perform whatever other steps you need, using (an also to be added,sth like): postRender, or afterRender instance listener.
  • rename elName -> tag
  • add auto CamelCase to camel-case element naming from class name so no need to override <$>.name static prop
  • auto do a set state on every event handler function (so we can wrap that event handler function)
  • seamless inline handlers for custom events by overloading change event
  • add Store state management class for basics
  • maybe extend change to onchange-deleted to reduce eventName switching boilerplate
  • consider allowing passing arguments to inline handlers, like filterTodos('completed'). but we can just do filterTodos() { const filter = click.target.value
  • add automatic 'refs' so just like id elements occur on window, 'id' elements will occur on the closest ancestor shadow host they are descendents of
  • for state update render consider doing something like: host.cloneNode(true) (including shadow somehow), cloned.state = host.state; host.replaceWith(cloned) etc.
  • consider specifying some attrs to be synced to state props not just IDL element props