:target is not applied on web component
Reported by
matteowe...@googlemail.com,
Mar 14 2017
|
|||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36
Steps to reproduce the problem:
:target doe snot work in web component but it work outside like the image I attached shows.
<script>
(() => {
let template = `
<div>
<h2>Location pseudo selector</h2>
<a href="#location">location-1</a>
<h2 id="location" name="location">title-1</h2>
</div>
<style>
#location:target {
background-color: yellow;
color: tomato;
}
</style>
`;
customElements.define('my-location-psuedo-selector', class myElement extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = template;
}
});
})()
</script>
What is the expected behavior?
What went wrong?
:target does not select the id element
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 57.0.2987.98 Channel: stable
OS Version: OS X 10.12.3
Flash Version:
,
Mar 15 2017
,
Mar 15 2017
The current behaviour matches the spec https://html.spec.whatwg.org/multipage/browsers.html#target-element See step 5 of target processing model where "element in the document tree" ... The document tree does not include elements in a shadow root. https://dom.spec.whatwg.org/#document-trees https://dom.spec.whatwg.org/#shadow-trees
,
Mar 15 2017
Ok, basically :target it's not activated because shadowRoot does not have a target element set on his root. document had set target element but the dom element is inside another root. I think it's trick, I think CSS should work everywhere, shadowRoot should allow to set a target element otherwise looks like a broken language. |
|||
►
Sign in to add a comment |
|||
Comment 1 by joelhockey@chromium.org
, Mar 15 2017