when use web components and bind a event the element will Invisible #62

ystyle · 2019-07-31T17:37:47Z

Describe the bug
see this gif , the button will hidden， the element still stay here, and receive click event, bug it Invisible。

if remove the click event ， it work's well.

other element or other envent has this issue too

Software Versions
Vugu version: master
Go version: go1.12.4 windows/amd64
Browser and version: google lastest version

To Reproduce

// devserver.go
// +build ignore

package main

import (
	"github.com/vugu/vugu/simplehttp"
	"log"
	"net/http"
	"os"
)

// DefaultPageTemplateSource a useful default HTML template for serving pages.
var DefaultPageTemplateSource = `<!doctype html>
<html>
<head>
{{if .Title}}
<title>{{.Title}}</title>
{{else}}
<title>Vugu Dev - {{.Request.URL.Path}}</title>
{{end}}
<meta charset="utf-8"/>
{{if .MetaTags}}{{range $k, $v := .MetaTags}}
<meta name="{{$k}}" content="{{$v}}"/>
{{end}}{{end}}
{{if .CSSFiles}}{{range $f := .CSSFiles}}
<link rel="stylesheet" href="{{$f}}" />
{{end}}{{end}}
{{if .JSFiles}}{{range $f := .JSFiles}}
<script src="{{$f}}" ></script>
{{end}}{{end}}
<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.7.0/lib/encoding.min.js"></script> <!-- MS Edge polyfill -->
<script src="/wasm_exec.js"></script>
</head>
<body>
<div id="root_mount_parent">
{{if .ServerRenderedOutput}}{{.ServerRenderedOutput}}{{else}}
<wired-spinner style="position: absolute; top: 50%; left: 50%;" spinning></wired-spinner>
{{end}}
</div>
<script>
var wasmSupported = (typeof WebAssembly === "object");
if (wasmSupported) {
	if (!WebAssembly.instantiateStreaming) { // polyfill
		WebAssembly.instantiateStreaming = async (resp, importObject) => {
			const source = await (await resp).arrayBuffer();
			return await WebAssembly.instantiate(source, importObject);
		};
	}
	const go = new Go();
	WebAssembly.instantiateStreaming(fetch("/main.wasm"), go.importObject).then((result) => {
		go.run(result.instance);
	});
} else {
	document.getElementById("root_mount_parent").innerHTML = 'This application requires WebAssembly support.  Please upgrade your browser.';
}
</script>
</body>
</html>
`

func main() {
	wd, _ := os.Getwd()
	l := "127.0.0.1:8844"
	log.Printf("Starting HTTP Server at %q", l)
	simplehttp.DefaultPageTemplateSource = DefaultPageTemplateSource
	h := simplehttp.New(wd, true)
	// include  js files
	simplehttp.DefaultStaticData["JSFiles"] = []string{
		"https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js",
		"https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.js",
	}
	log.Fatal(http.ListenAndServe(l, h))
}

<!-- root.bugu -->
<div class="my-first-vugu-comp">
    <wired-button @click="data.Toggle()">Test</wired-button>
    <div vg-if="data.Show">I am here！</div>
</div>

<style>
    .my-first-vugu-comp { background: #eee; }
</style>

<script type="application/x-go">
    type RootData struct { Show bool }
    func (data *RootData) Toggle() { data.Show = !data.Show }
</script>

Expected behavior
the element will display always

Additional Notes
in react , vue it works

bradleypeabody · 2019-08-01T20:55:25Z

Gotcha. Yeah that's funky. It is possible that some of the DOM syncing code is interfering with what the web component functionality of the browser is doing.

I'm in the middle of rewriting a bunch of stuff in the DOM syncing area now, I think this needs to be looked at again after that is done. But I'll keep it in mind and I'm sure it can be made to work; I unfortunately just don't see a simple workaround right at the moment.

ystyle changed the title ~~when use web components and bind a event the element will display none~~ when use web components and bind a event the element will hidden Jul 31, 2019

ystyle mentioned this issue Jul 31, 2019

Web Component or Custom Element Support #59

Open

ystyle changed the title ~~when use web components and bind a event the element will hidden~~ when use web components and bind a event the element will Invisible Aug 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

when use web components and bind a event the element will Invisible #62

when use web components and bind a event the element will Invisible #62

ystyle commented Jul 31, 2019 •

edited

bradleypeabody commented Aug 1, 2019

when use web components and bind a event the element will Invisible #62

when use web components and bind a event the element will Invisible #62

Comments

ystyle commented Jul 31, 2019 • edited

bradleypeabody commented Aug 1, 2019

ystyle commented Jul 31, 2019 •

edited