aurelia / aurelia/templating

<compose> content not loaded in DOM when calling from Attached method.

Open
#646 4 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
TypeScript
Stars
113
Forks
101
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
au -v 0.35.1

**Please tell us about your environment:**
* **Operating System:**
Linux (ubuntu) but also under Win10

* **Node Version:**
v10.10.0

* **NPM Version:**
6.4.1

* **Browser:**
all

* **Language:**
ESNext

**Current behavior:**
Compose content is not ready in DOM for 'attached' method.
It looks like the attached method is called before the composition is done.
If you are using compose as includes only ([without view-model](https://aurelia.io/docs/templating/dynamic-ui-composition#composing-without-a-view-model)) you are not able to get the part of the `` DOM.

**Expected/desired behavior:**

Working example:
https://gist.run/?id=22855ce9b7864f8891a150b8a645b0db
In console you will see `

` element.

Now we have to downgrade the aurelia-templating to version 1.7.0 which works well. (and also related parts)

> "aurelia-bootstrapper": "2.2.0",
> "aurelia-framework": "1.2.0",
> "aurelia-templating": "1.7.0",
> "aurelia-templating-resources": "1.6.1",
> "aurelia-templating-router": "1.3.1",

**How to reproduce:**
Install new aurelia project: au new
Keep everything in default.

Once the project is ready, create view template - comp.html:

```

Tadaa

```

Use compose element and include the created view to app.html:

```

${message}


```
Next create the attached method and try to get the element from comp.html
```
export class App {
message = 'Hello World!';

attached(){
console.log( document.getElementById('here') );
}
}
```
`au run` and watch the console. You'll see `null`. :(

* **What is the expected behavior?**
According your documentation:
attached() - the component is attached to the DOM (in document). If the view-model has an attached callback, it will be invoked at this time.

* **What is the motivation / use case for changing the behavior?**
We are using compose elements as includes and for 3rd party plugins which needs the DOM to be loaded/ready before they work. Now the DOM is not ready when calling it from attached method so the app crashes.

I appreciate any help. :v:
Thank you very much!

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with app.html composing comp.html, then inspect the attached() lifecycle callback and compose element behavior. Confirm the fix by ensuring document.getElementById('here') is available from attached() while preserving the documented lifecycle behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.