# Content projection issue

**URL:** <https://discourse.aurelia.io/t/content-projection-issue/1960>\
**Category:** Help Requests\
**Created:** [November 28, 2018, 2:39am UTC](https://discourse.aurelia.io/t/content-projection-issue/1960 "2018-11-28T02:39:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [November 28, 2018, 2:39am UTC](https://discourse.aurelia.io/t/content-projection-issue/1960/1 "2018-11-28T02:39:55Z")

</div>

I am doing content project on a custom element that doesn’t work when the element is composed dynamically on the view. I don’t think I’m up against the limitation of the slot

Here is my custom element ‘custom-container’

```auto
<template>
  <div class="ux-dialog-body" id="ux-dialog-body" css="width: ${width}px; height: ${height}px;" style="overflow:auto; padding:5px;">
    <slot name="body">
    </slot>
  </div>

  <slot name="footer">
    <button id="dgCancel" if.bind="cancelButtonVisible" disabled.bind="cancelDisabled" click.trigger="cancel()" class="btn btn-default"
      type="button">${cancelText}
      <b if.bind="autoCloseCancels && count">${countdown}</b>
    </button>
    <button id="dgOk" disabled.bind="okDisabled" click.trigger="ok()" type="submit" class="btn btn-primary">
      ${okText} <b if.bind="!autoCloseCancels && count">${countdown}</b>
    </button>
  </slot>
</template>

```

If i place this element on a view like this , I’ll get the slots doing what I expect, in this case I get the footer slot fallback content

```auto
  <custom-container>
    <div slot="body" class="form-group">
      <label for="nameField">Name</label>
      <input class="form-control" value.bind="dialogModel.model.name" type="text" id="nameField" />
    </div>
  </custom-container>

```

But when I have this element added to the main view dynamically by compose on thew view or compose from the view model, the projection is broken. Obviously there is an issue with compose Or i’m doing something wrong. I added an `if.bind` to my case where I had the custom-container in the view and kept it hidden for 5 seconds before showing it and it works fine that way. Why is compose different?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 28, 2018, 6:01am UTC](https://discourse.aurelia.io/t/content-projection-issue/1960/2 "2018-11-28T06:01:23Z")

</div>

Can you give an example of how you are composing?

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [November 28, 2018, 1:41pm UTC](https://discourse.aurelia.io/t/content-projection-issue/1960/3 "2018-11-28T13:41:24Z")

</div>

Apparently I didn’t push my commits last night so I can’t give pasted code, but I’m not doing anything fancy with compose. I tried it in the view doing `<compose if.bind="myTest" view-model="myViewModel"></compose>`

I also tried it the way I want it to work which is doing the compose via the container viewmodel. Both result in the same output. The settimeout was the last thing I tried thinking it was some sort of timing issue.

```auto
 bodyChanged() {
        if (this.model.type === DialogType.custom) {
            let context = this.createContext((<CustomModel>this.model).bodyViewModel, this.body, (<CustomModel>this.model).model);
            let _this = this;
            setTimeout(() => {
                _this.compositionEngine.compose(context).then((view: any) => {
                    _this.viewRef = view.viewModel;                  
                });
            }, 2000);

        }
    }

    createContext(viewModel: object, host: Element, model: object): CompositionContext {
        return {
            container: this.container.createChild(),
            viewModel: viewModel,
            model: { dialogContainer: this, model: model },
            host: host,
            bindingContext: null,
            viewResources: null,
            viewSlot: new ViewSlot(host, true)
        };
    }

```

The view I’m doing this compose on is the view that is bound to aurelia-dialog if that has anything to do with it. I just find it strange that when I place the contents of the view I want to compose directly in the dialog view (see first post) it works just fine even if I do the delay with the if.bind

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [December 4, 2018, 1:58am UTC](https://discourse.aurelia.io/t/content-projection-issue/1960/4 "2018-12-04T01:58:02Z")

</div>

Is there anything else I can do, giving my code right now isn’t an option

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [December 4, 2018, 2:17am UTC](https://discourse.aurelia.io/t/content-projection-issue/1960/5 "2018-12-04T02:17:59Z")

</div>

I just need to see the difference in behavior. From your code snippets, I can try to guess, but I was a bit confused, as it seems to be matching how current aurelia dialog default resources work. Maybe I should read what you described a bit more closely

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [December 4, 2018, 2:23am UTC](https://discourse.aurelia.io/t/content-projection-issue/1960/6 "2018-12-04T02:23:25Z")

</div>

Part of that was my fault, I forgot to add the real code. Sorry. If there is no way to make this work, i’m not going to lose sleep over it because I have a working solution, it just requires me to have a separate footer viewmodel when I want different buttons

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [December 5, 2018, 12:21am UTC](https://discourse.aurelia.io/t/content-projection-issue/1960/7 "2018-12-05T00:21:19Z")

</div>

I think i get what you want to do. Let me have a test and I’ll get back to you.

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [May 18, 2019, 8:03pm UTC](https://discourse.aurelia.io/t/content-projection-issue/1960/8 "2019-05-18T20:03:53Z")

</div>

The reason this wouldn’t work is due to the page life cycle not being fully triggered during compose.

Calling context.viewSlot.activate() after the compositionEngine.compose call lets my scenario run through