{"action":"opened","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/4826","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/4826/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/4826/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/4826/events","html_url":"https://github.com/vuejs/vue/issues/4826","id":204456393,"number":4826,"title":"Nested scoped slots (provide content for parent without losing child scopes)","user":{"login":"hector-humberto","id":25423622,"avatar_url":"https://avatars.githubusercontent.com/u/25423622?v=3","gravatar_id":"","url":"https://api.github.com/users/hector-humberto","html_url":"https://github.com/hector-humberto","followers_url":"https://api.github.com/users/hector-humberto/followers","following_url":"https://api.github.com/users/hector-humberto/following{/other_user}","gists_url":"https://api.github.com/users/hector-humberto/gists{/gist_id}","starred_url":"https://api.github.com/users/hector-humberto/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hector-humberto/subscriptions","organizations_url":"https://api.github.com/users/hector-humberto/orgs","repos_url":"https://api.github.com/users/hector-humberto/repos","events_url":"https://api.github.com/users/hector-humberto/events{/privacy}","received_events_url":"https://api.github.com/users/hector-humberto/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-01-31T23:36:01Z","updated_at":"2017-01-31T23:36:01Z","closed_at":null,"body":"Hello. I am trying to develop a small component for personal use. It is a data table component that should allow customization of `tr` element and its `td` child elements independently. Both element types are scoped slots that each offer fallback markup. This is a very simplified example of what I am working with:\r\n```html\r\n<table>\r\n  <thead>\r\n    <tr>\r\n      <th>Id</th>\r\n      <th>Name</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <slot name=\"row\" v-for=\"(row, index) of rows\" :row=\"row\" :index=\"index\">\r\n      <tr>\r\n        <slot v-for=\"(value, key) of row\" :name=\"key\" :value=\"value\">\r\n          <td>{{ value }}</td>\r\n        </slot>\r\n      </tr>\r\n    </slot>\r\n  </tbody>\r\n</table>\r\n```\r\nI am currently able to customize `tr` and `td` slots, but changing out `tr` requires for me to re-implement it's `td` children. I understand the reason for this is that whatever markup I place inside `<slot/>` is *fallback* content. So, by specifying content for `<slot name=\"row\"/>`, the component no longer has any knowledge of each `td` slot. However, I would still like to be able to customize that `tr` root element independently somehow while still keeping the *rest* of the slot's fallback content, optionally being able to also customize one or several of the `td` slots. Here is an example of what I want to do:\r\n```html\r\n<example :rows=\"rows\">\r\n  <template slot=\"row\" scope=\"{ row, index }\">\r\n    <tr :class=\"[ (index + 1) % 2 === 0 ? 'even' : 'odd' ]\">\r\n      <!-- somehow show td slots' fallback markup -->\r\n      <template slot=\"id\" scope=\"{ value }\"> <!-- customize only 'id' slot -->\r\n        <td style=\"text-align: right; background-color: blue; color: white;\">{{ value }}</td>\r\n      </template>\r\n    </tr>\r\n  </template>\r\n</example>\r\n```\r\nI asked this question on the vue forums and got no answer, so I assume this isn't currently possible. I am submitting this as a feature request.\r\n\r\nI have a codepen up and running [here](http://codepen.io/hector-rodriguez/pen/ZLvQqm) for testing. Thank you very much for your help."}}
{"actor":{"display_login":"hector-humberto"}}