Comments (7)
@khushalsagar Would you mind inventorying what we've got / decisions we've made about this so far? :)
from csswg-drafts.
@fantasai did some digging around on this and landed on https://drafts.csswg.org/css-scoping-1/#shadow-names. This is the closest thing in CSS specs which is trying to define a generic concept of how global names should be handled. This was discussed on #1995.
There's 2 relevant concepts:
- Tree scoped name: Each time a name is defined it is assumed to be global within its tree scope. The root element hosting the stylesheet is implicitly part of the namespacing for these names.
- Tree scoped reference: When a name is used by a CSS property (like
animation-name
), the root element hosting the stylesheet (which establishes it's tree scope) is again captured.
When de-referencing a tree scoped reference, we start looking in the tree scope which matches the reference and keep going higher in the tree scope hierarchy until a match is found. This essentially means that names defined in a tree scope are visible to the descendants by default (if they are not overridden) but names defined in an inner tree scope are not visible to outer tree scope. This has been highlighted as an issue for anchor positioning, see #9408.
But there's 2 issues with the above:
-
This means names in a scope are visible throughout the subtree by default which goes against @annevk's comment here that exposing names should be an opt-in.
There's also a comment about names in inner scope going only 1 level up but that's a separate conversation since names are not exposed up in the hierarchy.
-
The implementation doesn't align with the spec. At least for
@keyframe
and@property
the names defined in an outer tree scope can't be referenced by the inner tree scope in Chrome, Firefox and Safari. And this is actually good if we do want an opt-in for names to be visible across shadow DOM boundaries.
So adding this to the agenda to revisit the spec.
from csswg-drafts.
@flackr pointed out that @property
declarations behave as per spec, i.e., declarations in the outer scope are visible in inner scope. Here is an example: https://jsbin.com/xoqebek/edit?html,output (credits to @flackr).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="host">
<template shadowrootmode="open">
<div class=outer>I'm in the shadow DOM using outer names</div>
<div class=inner>I'm in the shadow DOM using inner names</div>
<style>
@property --inner-property {
syntax: "<color>";
inherits: false;
initial-value: green;
}
@keyframes inner-anim {
from { opacity: 1;}
to { opacity: 0;}
}
.outer {
animation: outer-anim 1s infinite;
color: var(--outer-property);
}
.inner {
animation: inner-anim 1s infinite;
color: var(--inner-property);
}
</style>
</template>
</div>
<style>
@keyframes outer-anim {
from { opacity: 1;}
to { opacity: 0;}
}
@property --outer-property {
syntax: "<color>";
inherits: false;
initial-value: green;
}
#outer {
animation: outer-anim 1s infinite;
color: var(--outer-property);
}
#outer-inner {
animation: inner-anim 1s infinite;
--inner-property: jfaowiej; /* not a valid color so will be discarded if property registration is used. */
color: var(--inner-property);
}
</style>
<div id="outer">I'm in outer DOM using outer names</div>
<div id="outer-inner">I'm in outer DOM using inner names</div>
</body>
from csswg-drafts.
The proposal here seems relevant to this problem: #8915 (comment).
If the idea in the existing spec makes sense then the above proposal could be the opt-in to gate exposing of names as defined in that spec (in terms of priority order). The spec misses defining how an outer tree scope can use names in inner tree scopes but I think that could be as simple as deciding based on the DOM order of the roots associated with descendant tree scopes.
from csswg-drafts.
@flackr pointed out that
@property
declarations behave as per spec
Also @font-face
.
from csswg-drafts.
I'm not convinced that what's described for at-rule declarations at https://drafts.csswg.org/css-scoping-1/#shadow-names applies to peer-to-peer names like view-transition-name
and view-timeline-name
. IMO as a general rule those should be 100% scoped to the tree where they're defined, and there should arguably be a way to pierce through the shadow boundary for particular names (though #10303 might be enough here).
from csswg-drafts.
Closing this based on the clarification at #10325 (comment).
from csswg-drafts.
Related Issues (20)
- [css-ui] Pseudo-element for select's UA button HOT 9
- [css-overflow-5] Scroll-markers
- [css-sizing-3] Content contribution of min-inline-size:fit-content and max-inline-size:fit-content HOT 4
- [css-overflow-5] Scroll button pseudo-elements HOT 2
- [css-position-3] Define inline static position in-line
- window.styleMedia is deprecated draft version of window.matchMedia API that is not implemented in Firefox and will be removed from the web platform in future. HOT 1
- [css-view-transition] Using :has pseudo-class with groups
- [css-values-4][cssom] Proposal to allow retrieval of sub-pixel border values HOT 9
- [css-color][css-values] Parsing/Serialization behavior for rgb/hsl/hwb colors with calc() containing font/container/viewport relative lengths HOT 3
- Why there's no horizontal-rtl and horizontal-ltr values in the "Writing mode" property? HOT 8
- [css-text] text-transform note on "casing" is inaccurate HOT 2
- [css-typed-om] Is using a constructed expression of the form 1px/1px invalid as a <number> HOT 3
- [css-easing] `linear` keyword is described as a function in level 1, inconsistent with level 2 HOT 8
- [css-view-transitions-1] Should handle transition frame avoid calling "update pseudo-element styles" when all animations are paused? HOT 4
- [cssom-view-1] Provide onAnimationEnd callback in scrollIntoView options - Accidently closed?
- [overflow-5] Allowing markers to be active even when not scrollable to aligned position. HOT 1
- [css-shapes-2] Interpolation between `shape()` and `path()` needs more detail HOT 2
- [css-ui][css-sizing] Should resize respect with aspect-ratio?
- [css-inline-3] non-zero blocks should prevent text-box-trim propagation HOT 2
- Allow applying style rules to the container itself (especially with style querries)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from csswg-drafts.