File tree Expand file tree Collapse file tree 2 files changed +9
-28
lines changed Expand file tree Collapse file tree 2 files changed +9
-28
lines changed Original file line number Diff line number Diff line change 11< script type ="module ">
22import { createApp } from '../src'
33
4+
5+ // Custom Elements
46export class MyCounter extends HTMLElement {
57 data ( ) {
68 return {
9+ $template : `<template>My count is {{ count }}<button @click="inc">++</button></template>` ,
710 count : 0 ,
11+ inc ( ) {
12+ this . count ++
13+ }
814 }
915 }
1016
1117 connectedCallback ( ) {
1218 this . setAttribute ( 'v-scope' , "$el.data()" )
13- this . innerHTML = `
14- <style>
15- * {
16- font-size: 100%;
17- }
18-
19- span {
20- width: 4rem;
21- display: inline-block;
22- text-align: center;
23- }
24-
25- button {
26- width: 4rem;
27- height: 4rem;
28- border: none;
29- border-radius: 10px;
30- background-color: seagreen;
31- color: white;
32- }
33- </style>
34- <button @click="count--">-</button>
35- <span v-text="count"></span>
36- <button @click="count++">+</button>
37- `
19+ createApp ( ) . mount ( this )
3820 }
3921}
4022
4123customElements . define ( "my-counter" , MyCounter )
42- createApp ( ) . mount ( )
4324</ script >
4425
45- < my-counter / >
26+ < my-counter count =" hello " > </ my-counter >
Original file line number Diff line number Diff line change @@ -188,5 +188,5 @@ const resolveTemplate = (el: Element, template: string) => {
188188 el . appendChild ( ( templateEl as HTMLTemplateElement ) . content . cloneNode ( true ) )
189189 return
190190 }
191- el . innerHTML = template
191+ el . innerHTML = template . replace ( / < [ \/ \s ] * t e m p l a t e \s * > / ig , '' )
192192}
You can’t perform that action at this time.
0 commit comments