Access targets during initialization #129

Activity

1. lcmen commented on Mar 27, 2021

   

   lcmen

   on Mar 27, 2021

   Last edited by lcmen

   ContributorAuthor

   More actions

   Actually I've found html-parsed-element which addresses this problem (it's a nice abstraction over MutationObserver). Unfortunately, it does not allow to override connectedCallback via regular operator assignment (used by @controller decorator), so I've created a PR to fix it. Hopefully it gets merged, so we can access targets in the parsedCallback like this:

   import HTMLParsedElement from 'html-parsed-element';
   import { controller, attr, target } from '@github/catalyst'
   
   @controller
   export default class TextEditorElement extends HTMLParsedElement {
     @target area: HTMLInputElement
   
     parsedCallback() {
       this.area.value = 'Hello World!'
     }
   }

   PS. TypeScript might complain about HTMLParsedElement compatilbity with HTMLElement (Argument of type 'typeof TextEditorElement' is not assignable to parameter of type 'CustomElement'. Type 'TextEditorElement' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 234 more.).
2. lcmen commented on Mar 27, 2021

   

   lcmen

   on Mar 27, 2021

   Last edited by lcmen

   ContributorAuthor

   More actions

   PR got merged, and new version has been released so parsedCallback can be used with catalyst to initialize targets as shown above.

   Should I add such info to the guides?
3. keithamus

   closed this as completedon Mar 30, 2021
4. github

   locked and limited conversation to collaborators on Mar 30, 2021