shadow dom is attached to checkboxes, breaking them

[mark-hahn]

See atom/atom#4819

My input checkboxes all have a shadow-root attached after using $$. When I add checked="checked" to them using $chk.attr checked:yes nothing happens. This makes checkboxes pretty much useless.

I've traced the $$ code and I don't see the shadow-root being attached but I see shadow-root in the DOM immediately after innerhtml is set.

The only thing suspicious I see is the is=space-pen-div surrounding the input. But space-pen-div seems to only have the attach and detach callbacks set to empty functions.

I searched this repo for "createShadowRoot" and found nothing.

Some help please? The only work-around I can think of is to ditch space-pen which would be a bummer.

[nathansobo]

@mark-hahn Sorry for the trouble, but I can't reproduce this. Maybe you could modify the test I set up here to flush out the issue? I am able to check a checkbox via the 'checked' attribute in that example. What am I missing?

[mark-hahn]

You are testing the input element for the presence of the checked
attribute. My code also adds that attribute. However the attribute does
nothing. The checkbox on the screen remains unchecked.

I assume the problem is created the empty shadow dom. My understanding is
that the shadow dom overrides some properties of its host. However, my
understanding of shadow doms is limited.

On Tue, Jan 6, 2015 at 10:43 AM, Nathan Sobo notifications@github.com
wrote:

@mark-hahn https://github.com/mark-hahn Sorry for the trouble, but I
can't reproduce this. Maybe you could modify the test I set up here
https://github.com/atom/atom-space-pen-views/blob/ns-checkbox-test/spec/checkbox-spec.coffee
to flush out the issue? I am able to check a checkbox via the 'checked'
attribute in that example. What am I missing?

—
Reply to this email directly or view it on GitHub
#4 (comment)
.

[nathansobo]

When I run that test I see the box checked on my screen. Is that not what you see?

[mark-hahn]

I didn't actually run it. I'll do that now.

On Tue, Jan 6, 2015 at 1:19 PM, Nathan Sobo notifications@github.com
wrote:

When I run that test I see the box checked on my screen. Is that not what
you see?

—
Reply to this email directly or view it on GitHub
#4 (comment)
.

[mark-hahn]

I hate to show my ignorance, but how do I run that spec? I copied it into the spec for a newly generated sample project and tested the package with ctrl-alt-p but all I got was an empty Spec Suite window with the chrome inspector showing style tags and nothing else.

[mark-hahn]

Duh, I need to change require '../lib/main'.

[nathansobo]

You should be able to run that spec directly out of that branch.

[mark-hahn]

I can't get the spec to work but check this out ...

atom/atom#4819 (comment)

[nathansobo]

Answered this in the other thread. Check it out over there.

[mark-hahn]

Edit: This post is outdated. See the next post...

Unfortunately this needs to be opened again. It is happening in a new place in my UI even though I've replaced all instances of .attr checked:yes with .prop checked:yes. This time I see no checked="checked" in the inspector but the actual checkbox is checked.

I will try to make another test case for this but it is getting to be a PITA. Can't we just get the real problem fixed? We already have a way to repeat the problem.

Edit: And it still has the mysterious #shadow-root on the input element.

[mark-hahn]

This can stay closed. I'm sorry I wasted your time.

I understand what is going on now. In jQuery 1.6 there was a major breaking change. The .attr function now behaves quite differently. It now changes the HTML and not the DOM.

• I didn't know there were two separate things HTML and DOM. I assumed it was all DOM and the inspector just showed an HTML-ized version of the DOM.
• .attr now only changes the initial value of checked and doesn't affect the live value.
• I had never used jQuery >= 1.6 until I got it here in space-pen.
• jQuery should have never made such a breaking change. I hate to think how many web devs went crazy like I did.

I still have the problem but I'm assuming some library is using .attr instead of .prop. I'll either chase down the source of the problem or just write my own checkbox. I'm pissed at jQuery for causing this problem.