go-js-dom icon indicating copy to clipboard operation
go-js-dom copied to clipboard

Add HTMLDialogElement, HTMLPictureElement,, HTMLSlotElement

Open inkeliz opened this issue 6 years ago • 2 comments

It's a basic implementation for HTMLDialogElement, HTMLPictureElemenand HTMLSlotElement. I need to do more tests with the Slot. The HTMLDialogElement is only supported on Chrome/Opera, right now.


Because it's only supported by Chrome, if the developer strictly uses the close() and show() and not relies on method="dialog", it's possible make a simple polyfill, such as:

el := dom.GetWindow().Document().QuerySelector("dialog#my-dialog")
if dialog, ok := el.(*dom.HTMLDialogElement); ok {
	dialog.ShowModal()
} else {
	el.SetAttribute("open", "true")
}

Then, on CSS, do something like dialog[open] { ... }, which will work in both cases.


The PictureElement has nothing special.


I need to test the HTMLSlotElement, because it has . assignedNodes, but also have .assignedElements and assignedSlot. The Mozilla page just say about .assignedNodes(), however.

inkeliz avatar Dec 22 '18 02:12 inkeliz

Thanks for working on this.

I wanted to check if you had a need or use case for these, or if you were adding them just because they're missing? The general practice for this package to add support for missing DOM elements when someone has a concrete need. It's okay to leave things unimplemented until that need arises. That is especially helpful when it comes to the more esoteric and less widely supported DOM elements, since it's likely they become more well defined and easier to support by the time someone needs them.

dmitshur avatar Jan 03 '19 03:01 dmitshur

I'm currently using it, except the SlotElement. Actually, I also change the source to include the srcset, but I don't publish the code, yet.

I don't use the SlotElement, because I don't know that exists. I'm using only the template. That's the only element that I include just to include. The element.Closest and element.Matches is used in my current project. I'm also using the Dialog, but with some additional code for legacy browsers.

The Picture I use to handle errors. I create one event listener to replace broke images. I must check if the element is a HTMLImage or HTMLPicture. :)

inkeliz avatar Jan 04 '19 20:01 inkeliz