Issue with ":target" and Web Components

[acarlstein]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/:target

What information was incorrect, unhelpful, or incomplete?

Let's assume you have this Web Component:

let template = `
	<div>
		<a href="#message">Make the message red</a>
		<h2 id="message">Message in a bottle</h2>
	</div>
	<style>
		#message:target {
			color: red;
		}
	</style>
`;

customElements.define('my-component', class myElement extends HTMLElement {
	constructor() {
		super();
		let shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.innerHTML = template;
	}
});

This code fails to work because the event :target is missing in the root of the shadow.

Specific section or headline?

What did you expect to see?

I expected that :target would work inside the web components. I expect the message to run red when clicking on the link.

Did you test this? If so, how?

MDN Content page report details

• Folder: en-us/web/css/_colon_target
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/_colon_target/index.html
• Last commit: https://github.com/mdn/content/commit/f4fb4c2d90a134366c280eec6cb599825981ad5d
• Document last modified: 2021-03-15T17:55:56.000Z

[Manthanjain]

Can i take up this issue and start working on it?

[Ratnadeepdeyroy]

Can i take up this issue and start working on it?

[hamishwillee]

Absolutely! Assigned to @Ratnadeepdeyroy .

[Sorry I missed your original request @Manthanjain - assigning to Ratnadeepdeyroy because I assume you have moved on to other things]

[sidverma32]

@hamishwillee Anyone is working on this issue? If not, can i take this up?

[hamishwillee]

@sidverma32 Yes thanks, assigned to you. First thing to do will be to check that it hasn't already been fixed. It may be that @Ratnadeepdeyroy did fix this but did not close this issue.

@Ratnadeepdeyroy Unassigned from you.

[sidverma32]

I think this issue is very much the intended behaviour. In general, id references work within each tree, not across shadow boundaries. For example, document.getElementsById(id) will only find elements with the specified id in the document tree, not any of the shadow trees connected to it.

The example which you showcased @acarlstein is a new feature request.

So this issue is not related to this MDN Web CSS Doc en-us/web/css/_colon_target

[acarlstein]

@sidverma32 thank you for taking a look into this issue. I am fine if this becomes a feature. I'm glad you folks are on top of this development and I appreciate the effort.

I would like to make it clear for anyone who might be reading this.

The HTML code, inside the template variable, is what "creates and manipulates" this particular shadow tree of this custom web component myElement.

This part of the code "creates" the shadow tree:

	<div>
		<a href="#message">Make the message red</a>
		<h2 id="message">Message in a bottle</h2>
	</div>

This part of the code tries to "manipulate" the element inside this particular shadow tree:

	<style>
		#message:target {
			color: red;
		}
	</style>

This code works fine inside the context of the document tree; however, it fails to work inside the context of the shadow tree.

If the manipulation using the pseudo-class :target fails inside the shadow tree, it might be going against the current public documentation that explains what pseudo-class does:

• https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:target
• https://www.w3.org/TR/selectors-3/#target-pseudo
• https://developer.mozilla.org/en-US/docs/Web/CSS/:target
• https://www.w3schools.com/cssref/sel_target.asp

Nothing here says that shadow trees are an exception when trying to use this pseudo-class.

Again, thank you for taking a look into this issue.

[Josh-Cena]

Worth reading https://discourse.wicg.io/t/target-css-does-not-work-because-shadowroot-does-not-set-a-target-element/2070