{"action":"created","issue":{"url":"https://api.github.com/repos/aurelia/templating/issues/337","repository_url":"https://api.github.com/repos/aurelia/templating","labels_url":"https://api.github.com/repos/aurelia/templating/issues/337/labels{/name}","comments_url":"https://api.github.com/repos/aurelia/templating/issues/337/comments","events_url":"https://api.github.com/repos/aurelia/templating/issues/337/events","html_url":"https://github.com/aurelia/templating/issues/337","id":153236267,"number":337,"title":"How to defer Aurelia lifecycle invocation when you also need a <content> element (cannot use if.bind). ","user":{"login":"kevmeister68","id":9400554,"avatar_url":"https://avatars.githubusercontent.com/u/9400554?v=3","gravatar_id":"","url":"https://api.github.com/users/kevmeister68","html_url":"https://github.com/kevmeister68","followers_url":"https://api.github.com/users/kevmeister68/followers","following_url":"https://api.github.com/users/kevmeister68/following{/other_user}","gists_url":"https://api.github.com/users/kevmeister68/gists{/gist_id}","starred_url":"https://api.github.com/users/kevmeister68/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kevmeister68/subscriptions","organizations_url":"https://api.github.com/users/kevmeister68/orgs","repos_url":"https://api.github.com/users/kevmeister68/repos","events_url":"https://api.github.com/users/kevmeister68/events{/privacy}","received_events_url":"https://api.github.com/users/kevmeister68/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-05-05T13:51:48Z","updated_at":"2016-05-17T08:00:04Z","closed_at":null,"body":"@EisenbergEffect I had a conversation with you on Gutter concerning how I can defer a section of my DOM, being the inner html of a custom element, from being activated by Aurelia until I want it to be activated.\r\n\r\nBy \"activated\" I mean that part of the DOM not instantiating its view model objects, not executing the lifecycle methods, no binding, etc. Functionally it's like what happens when you put a custom element in a template but forget the require element for it.\r\n\r\nThe application is a tab control. The tab page content of a particular tab must not activate until such time as the tab is first made visible. Imagine you had 15 tabs each with a data list component on it - it is wasteful loading 15 lists of data upfront if the user is never going to look at that tab page.\r\n\r\nYou suggested if.bind and for a regular situation that does the job perfēctly.\r\n\r\nBut if you think of a tabpage custom element and what its template might be,  it is not much more than a lightweight container for tab page \"content\" injected using the &lt;content&gt; element, wrapped by  a means to show or hide that content. In my case show.bind and if.bind are employed on two outer divs, with the content element inside that.\r\n\r\nIt should be a no brainer except it doesn't work.\r\n\r\nUnfortunately if.bind cannot be used with &lt;content&gt; because no content is ever shown. Another issue that I found on here says this is the result of how Shadow DOM works.\r\n\r\nDo you have any suggestions on how to achieve my objective?\r\n"},"comment":{"url":"https://api.github.com/repos/aurelia/templating/issues/comments/219646421","html_url":"https://github.com/aurelia/templating/issues/337#issuecomment-219646421","issue_url":"https://api.github.com/repos/aurelia/templating/issues/337","id":219646421,"user":{"login":"kevmeister68","id":9400554,"avatar_url":"https://avatars.githubusercontent.com/u/9400554?v=3","gravatar_id":"","url":"https://api.github.com/users/kevmeister68","html_url":"https://github.com/kevmeister68","followers_url":"https://api.github.com/users/kevmeister68/followers","following_url":"https://api.github.com/users/kevmeister68/following{/other_user}","gists_url":"https://api.github.com/users/kevmeister68/gists{/gist_id}","starred_url":"https://api.github.com/users/kevmeister68/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kevmeister68/subscriptions","organizations_url":"https://api.github.com/users/kevmeister68/orgs","repos_url":"https://api.github.com/users/kevmeister68/repos","events_url":"https://api.github.com/users/kevmeister68/events{/privacy}","received_events_url":"https://api.github.com/users/kevmeister68/received_events","type":"User","site_admin":false},"created_at":"2016-05-17T08:00:04Z","updated_at":"2016-05-17T08:00:04Z","body":"Sorry it's taken me a while to respond. I don't think there are a huge number of examples that \"need\" the functionality I am proposing, but widgets such as tab controls, accordions, and wizards all come to mind as UX constructs that _may or may not_ actually use a given UX \"sub-element\" (eg. tab-page, accordion page, wizard page etc).\r\n\r\nOther than that, your suggestion makes sense. The only downside is complexity. \r\n\r\nWhen you say inject the ViewSlot do you mean actually @inject the ViewSlot and then inject the view into that slot when required?\r\n\r\nI'm all for simple things being simple to do and all that, I'm not sure if this overly complex for the user case.\r\n\r\nWhich brings me to another question - is there any plans for a <content> type element that doesn't involve Shadow DOM. I know that might be the wrong question, as the right question might be having a <template> which doesn't end up in shadow DOM, and a <content> tag that works in that \"mode\"? \r\n"}}