Skip to content

Instantly share code, notes, and snippets.

@simplesmiler

simplesmiler/index.html Secret

Created May 6, 2017 16:52
Show Gist options
  • Save simplesmiler/8b19fd9482be5a6fa06c6a64418f84fd to your computer and use it in GitHub Desktop.
Save simplesmiler/8b19fd9482be5a6fa06c6a64418f84fd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.3.2"></script>
<script src="https://unpkg.com/portal-vue@1.0.0-beta.3"></script>
</head>
<body>
<!-- @NOTE: target outside the app -->
<div id="outside" class="frame">
</div>
<div id="app">
<!-- @NOTE: real portal-target -->
<div class="frame">
<portal-target name="proper">
</portal-target>
</div>
<!-- @NOTE: target inside the app -->
<div id="inside" class="frame">
</div>
<div class="frame">
<portal to="outside" target-el="#outside">
<app-child>I am shown in the devtools!</app-child>
</portal>
<portal to="proper">
<app-child>I too!</app-child>
</portal>
<portal to="inside" target-el="#inside">
<app-child>I'm not!</app-child>
</portal>
</div>
</div>
<script>
Vue.component('app-child', {
template: '<span><slot></slot></span>',
});
new Vue({
el: '#app',
});
</script>
<style>
.frame {
padding: 0.5em;
margin: 0.5em;
border: 1px dashed purple;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment