This describes an extension to position: absolute
/ position: fixed
which could be used to "anchor" an absolute/fixed element to another element in the DOM.
Positioned absolute/fixed is a relatively powerful layout mode, as a refresher:
/** | |
* Copyright 2018 Google Inc. All Rights Reserved. | |
* Licensed under the Apache License, Version 2.0 (the "License"); | |
* you may not use this file except in compliance with the License. | |
* You may obtain a copy of the License at | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* Unless required by applicable law or agreed to in writing, software | |
* distributed under the License is distributed on an "AS IS" BASIS, | |
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
* See the License for the specific language governing permissions and |
<style> | |
body { | |
--foo: red; | |
--foo: green; | |
--bar: red; | |
--bar: 42; | |
--quix: 42; | |
--quix: red; | |
} | |
</style> |
registerPaint('border-colors', class { | |
static get inputProperties() { | |
return [ | |
'--border-top-width', | |
'--border-right-width', | |
'--border-bottom-width', | |
'--border-left-width', | |
'--border-top-color', | |
'--border-right-color', | |
'--border-bottom-color', |
new Animation(new ScriptEffect('spring', { | |
'expand': [elem1], | |
'shrink': [elem2], | |
}, [ | |
document.timeline, | |
new ScrollTimeline(scrollElem), | |
])).play(); |
console.log('hello world.'); |
<!doctype html><html lang="en"> | |
<head> | |
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> | |
<title>Worklets Level 1</title> | |
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> | |
<meta content="ED" name="w3c-status"> | |
<link href="../default.css" rel="stylesheet" type="text/css"> | |
<link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> | |
<link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css"> | |
<meta content="Bikeshed version 81c00a31d8c468599cf8337dd150a8be9a2b4e5d" name="generator"> |
api = await remote { | |
import B from 'b.js'; | |
export class A { | |
constructor() { this.b = new B(); } | |
} | |
export function thing() { | |
} | |
} |