<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Macs and PCs use different keyboard modifiers for the same tasks, i.e. <code class="notranslate">CTRL C</code> and <code class="notranslate">CMD C</code> or in keyboard event terms <code class="notranslate">.ctrl</code> and <code class="notranslate">.meta</code>.</p>
<p dir="auto">Because you can't add modifiers dynamically, you have to build handlers yourself, losing out on the built in sugar:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function onKeyPress (event) {
  const isCopy = event.key === 'c' &amp;&amp; ((isMac &amp;&amp; event.metaKey) || event.ctrlKey)
  ...
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">onKeyPress</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">isCopy</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">key</span> <span class="pl-c1">===</span> <span class="pl-s">'c'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">isMac</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">metaKey</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">ctrlKey</span><span class="pl-kos">)</span>
  <span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Or use a plugin and do something like:</p>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;GlobalEvents v-if=&quot;isMac&quot; @keypress.meta.c=&quot;copy&quot; /&gt;
&lt;GlobalEvents v-if=&quot;isWin&quot; @keypress.ctrl.c=&quot;copy&quot; /&gt;"><pre class="notranslate">&lt;<span class="pl-ent">GlobalEvents</span> <span class="pl-e">v-if</span>=<span class="pl-s1"><span class="pl-pds">"</span>isMac<span class="pl-pds">"</span></span> @<span class="pl-e">keypress</span>.meta.<span class="pl-e">c</span>=<span class="pl-s1"><span class="pl-pds">"</span>copy<span class="pl-pds">"</span></span> /&gt;
&lt;<span class="pl-ent">GlobalEvents</span> <span class="pl-e">v-if</span>=<span class="pl-s1"><span class="pl-pds">"</span>isWin<span class="pl-pds">"</span></span> @<span class="pl-e">keypress</span>.ctrl.<span class="pl-e">c</span>=<span class="pl-s1"><span class="pl-pds">"</span>copy<span class="pl-pds">"</span></span> /&gt;</pre></div>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">I'm proposing several new cross-platform modifiers that would make it much easier to work with cross-platform keyboard shortcuts, on top of the existing excellent keyboard event handling:</p>
<ul dir="auto">
<li><code class="notranslate">action</code> - substitute the correct modifier key <code class="notranslate">ctrl</code> or <code class="notranslate">meta</code> depending on platform</li>
<li><code class="notranslate">mac</code> - limit the modifier to mac only</li>
<li><code class="notranslate">win</code> - limit the modifier to windows / linux only</li>
</ul>
<p dir="auto">That would allow combinations like so:</p>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// automatic
&lt;input @keypress.action.c=&quot;copy&quot; /&gt;"><pre class="notranslate">// automatic
&lt;<span class="pl-ent">input</span> @<span class="pl-e">keypress</span>.action.<span class="pl-e">c</span>=<span class="pl-s1"><span class="pl-pds">"</span>copy<span class="pl-pds">"</span></span> /&gt;</pre></div>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// manual, perhaps with different handling based on platform
&lt;input @keypress.mac.meta.v=&quot;pasteMac&quot; @keypress.win.ctrl.v=&quot;pasteWin&quot;  /&gt;"><pre class="notranslate">// manual, perhaps with different handling based on platform
&lt;<span class="pl-ent">input</span> @<span class="pl-e">keypress</span>.mac.meta.<span class="pl-e">v</span>=<span class="pl-s1"><span class="pl-pds">"</span>pasteMac<span class="pl-pds">"</span></span> @<span class="pl-e">keypress</span>.win.ctrl.<span class="pl-e">v</span>=<span class="pl-s1"><span class="pl-pds">"</span>pasteWin<span class="pl-pds">"</span></span>  /&gt;</pre></div>
<p dir="auto">This is a follow up of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="302109623" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/7740" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/7740/hovercard?comment_id=371309357&amp;comment_type=issue_comment" href="https://github.com/vuejs/vue/issues/7740#issuecomment-371309357">#7740 (comment)</a></p>
<h3 dir="auto">Rational</h3>
<p dir="auto">Problems with current scoped slot usage:</p>
<ul dir="auto">
<li>Verbose if using <code class="notranslate">&lt;template slot-scope&gt;</code></li>
<li>Limited to one element/component is using <code class="notranslate">slot-scope</code> directly on the slot element.</li>
</ul>
<h3 dir="auto">Proposal</h3>
<p dir="auto">Introduce a new <code class="notranslate">v-scope</code> directive, that can only be used on components:</p>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;comp v-scope=&quot;scope&quot;&gt;
  {{ scope.msg }}
&lt;/comp&gt;"><pre class="notranslate">&lt;<span class="pl-ent">comp</span> <span class="pl-e">v-scope</span>=<span class="pl-s1"><span class="pl-pds">"</span>scope<span class="pl-pds">"</span></span>&gt;
  {{ <span class="pl-smi">scope</span>.<span class="pl-smi">msg</span> }}
&lt;/<span class="pl-ent">comp</span>&gt;</pre></div>
<p dir="auto">It would work the same as <code class="notranslate">slot-scope</code> for the default scoped slot for <code class="notranslate">&lt;comp&gt;</code> (with <code class="notranslate">&lt;comp&gt;</code> providing the scope value). So it also works with deconstructing:</p>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;comp v-scope=&quot;{ msg }&quot;&gt;
  {{ msg }}
&lt;/comp&gt;"><pre class="notranslate">&lt;<span class="pl-ent">comp</span> <span class="pl-e">v-scope</span>=<span class="pl-s1"><span class="pl-pds">"</span>{ msg }<span class="pl-pds">"</span></span>&gt;
  {{ msg }}
&lt;/<span class="pl-ent">comp</span>&gt;</pre></div>
<h3 dir="auto">Why a New Directive</h3>
<p dir="auto">I believe the team briefly discussed what I proposed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="302109623" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/7740" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/7740/hovercard?comment_id=371309357&amp;comment_type=issue_comment" href="https://github.com/vuejs/vue/issues/7740#issuecomment-371309357">#7740 (comment)</a> on Slack some time back, but I could no longer find the chat record. Here's the reasoning behind a new directive:</p>
<ul dir="auto">
<li>
<p dir="auto"><code class="notranslate">slot-scope</code> was introduced as a special attribute instead of a directive (attributes that start with <code class="notranslate">v-</code> prefix) because <code class="notranslate">slot</code> is an attribute, and we wanted to keep slot-related attributes consistent. <code class="notranslate">slot</code> was in turn introduced as a non-directive attribute because we want the usage to mirror the actual slot usage in the Shadow DOM standard. We figured it would be best to avoid having our own parallel <code class="notranslate">v-slot</code> when there's something that is conceptually the same in the standard.</p>
</li>
<li>
<p dir="auto">Originally, <code class="notranslate">slot-scope</code> was designed to be only usable on <code class="notranslate">&lt;template&gt;</code> elements that act as abstract containers. But that was verbose - so we introduced the ability to use it directly on a slot element without the wrapping <code class="notranslate">&lt;template&gt;</code>. However, this also makes it impossible to allow using <code class="notranslate">slot-scope</code> directly on the component itself, because it would lead to ambiguity as illustrated <a href="https://github.com/vuejs/vue/issues/7740#issuecomment-370252860" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/7740/hovercard">here</a>.</p>
</li>
<li>
<p dir="auto">I thought about adding modifiers or special prefixes to <code class="notranslate">slot-scope</code> so that that we can use it on a component directly to indicate its slot content should be treated as the default scoped slot, but neither a modifier or a prefix like <code class="notranslate">$</code> seem to be the right fit. The modifier by design should only be applied to directives, while new special syntax for a single use case is inconsistent with the whole syntax design.</p>
</li>
<li>
<p dir="auto">For a very long time we've shied away from adding more directives, part of it being template syntax is something we want to keep as stable as possible, part of it being that we want to keep core directives to a minimum and only do things that users cannot easily do in userland. However, in this case scoped slot usage is important enough, and I think a new directive can be justified for making its usage significantly less noisy.</p>
</li>
</ul>
<h3 dir="auto">Concerns</h3>
<ul dir="auto">
<li>
<p dir="auto">The expression accepted by <code class="notranslate">v-scope</code> is different from most other directives: it expects a temporary variable name (which can also be a deconstruction), but not without a precedence: it acts just like the alias part of <code class="notranslate">v-for</code>. So conceptually <code class="notranslate">v-scope</code> falls into the same camp with <code class="notranslate">v-for</code> as a structural directive that creates temporary variables for its inner scope.</p>
</li>
<li>
<p dir="auto">This would break the users code if the user has a custom directive named <code class="notranslate">v-scope</code> and is used on a component.</p>
<ul dir="auto">
<li>
<p dir="auto">Since custom directives in v2 are primarily focused on direct DOM manipulations, it's relatively rare to see custom directives used on components, even more so for something that happens to be called <code class="notranslate">v-scope</code>, so the impact should be minimal.</p>
</li>
<li>
<p dir="auto">Even in the case of it actually happening, it is straightforward to deal with by simply renaming the custom directive.</p>
</li>
</ul>
</li>
</ul>