Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Access targets during initialization #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lcmen opened this issue Mar 26, 2021 · 2 comments
Closed

Access targets during initialization #129

lcmen opened this issue Mar 26, 2021 · 2 comments

Comments

@lcmen
Copy link
Contributor

lcmen commented Mar 26, 2021

Hey!
First of all, sorry for using GitHub issues for asking questions but not sure what's the best place to ask for help. I want to ask what's the best way to access targets during the initialization process (according to docs,connectedCallback might be too early to query element from the DOM)? Let's say I'd like to setup / start dropzone on a specific target when component is initialized. When / how should I do it?

@lcmen
Copy link
Contributor Author

lcmen commented Mar 27, 2021

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.).

@lcmen
Copy link
Contributor Author

lcmen commented Mar 27, 2021

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?

@github github locked and limited conversation to collaborators Mar 30, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants