` (i.e. it will simply wrap its content by default, like a `` or ``.\n\n`web-components` offer excellent support for composition, in particular allowing named ``s. The problem is that these relay on the shadowDOM. `xinjs` provides the `xinSlot` element which works just like a `` for `Component` subclasses that don't use the shadowDOM.\n\n### `:host` and styling custom-elements\n\nAgain, the `:host` selector has a special meaning for custom-elements with a shadowDOM, but `xinjs` allows you to use `:host` in the `elementCreator` `styleSpec` and simply replaces it with the `tag` the element gets registered under.\n\n> **Note** that when you pass `elementCreator` a `tag` it will use that if possible, but if it's already taken it will choose a unique new tag, and then replace `:host` with the actual tag.\n\n## The `Color` Class\n\n`xinjs` provides a `Color` class to allow convenient color operations. It is used internally by `xinjs`'s CSS tooling to allow color computations on CSS variables. The plan is to use this until the W3C adds similar functionality natively to CSS and then act as syntax sugar or simply fade away.\n\nE.g.\n\n```\nvars.themeColor_o50\n```\n\n…will produce a 50% opacity version of themeColor (note that it will replace themeColor's opacity with 50%, it won't multiply it).\n\n### Constructors\n\nYou can create a `Color` instance using the `constructor`, e.g.\n\n```\nconst red = new Color(255, 0, 0)\n```\n\nTwo class methods, `fromCSS` and `fromHSL` make it much more convenient:\n\n```\nconst red = Color.fromCSS('red')\nconst green = Color.fromCSS('#0d0')\nconst fadedTranslucentIndigo = Color.fromHSL(160, 0.25, 0.75, 0.5)\n```\n\n`Color` instances have properties and methods for creating derived colors and emitting CSS color specifications.\n\n### Computed Color Properties\n\n- `.inverse: Color`\n- `.inverseLuminance: Color` — grayscale inverse\n- `.mono: Color` — grayscale color\n- `.brightness: number` — [bt601](http://www.itu.int/rec/R-REC-BT.601) brightness value\n\n### Computed CSS string properties\n\n- `.rgb: string`\n- `.rgba: string`\n- `.hsl: string`\n- `.hsla: string`\n- `.html: string` — same as `.toString()` (see below)\n\n### Computed WebGL properties\n\n- `.RGBA: number[]`\n- `.ARGB: number[]`\n\n### Other class methods\n\nWhere an `amount` is required, this is clamped to [0..1] and used to adjust the value between its current value and the most extreme value. E.g. if a color's current saturation is 0.2 then saturating it by 0.5 will increase its saturation to 0.6, and desturating it by 0.5 will reduce its saturation to 0.1.\n\n- `.toString(): string` — #xxxxxx or #xxxxxxxx representation of color\n- `.brighten(amount: number): Color`\n- `.darken(amount: number): Color`\n- `.saturate(amount: number): Color`\n- `.desaturate(amount: number): Color`\n- `.rotate(degrees: number): Color` rotates the hue\n- `.opacity(alpha: number): Color` sets the opacity directly\n- `.swatch(): Color` simply returns the color, but outputs a swatch to console\n- `.blend(otherColor: Color, t: number)` interpolates between the color and `otherColor` in rgba space.\n- `.mix(otherColor: Colour, t: number)` interpolates between the color and `otherColor` in hsla space.\n\n> **Note** that neither `blend` nor `mix` behave like paint does. That's hard to simulate but could be approximated by conversion to/from CMYK (i.e. subtractive) color space.\n\n### `vars` and computed colors\n\nColors can be computed using the `vars` proxy and `_b`, `_s`, `_h`, and `_o` to perform brighten/darken, saturate/desaturate, hue rotation, and opacity adjustments.\n\nIf we assume `--some-color` has been defined as `#ff8000` (a bright orange).\n\n```\nvars.someColor_h30_s_50_o50\n```\n\nWill insert the same value as:\n\n```\nColor.fromCSS('#ff8000').brighten(0.25).desaturate(-0.5).html\n```\n\ni.e. `d0a1717f`.\n\n> **CAUTION!** The way this works is that the computed value of the color is determined on `document.body` at the time the CSS is rendered, so it can cause issues if themes are switched or colors are redefined deeper in the DOM.\n>\n> It will be really nice when the W3C does this properly!\n",format:"markdown",date:"",keywords:[],summary:"",author:"Tonio Loewald",_created:"2025-06-17T16:14:47.710Z",_modified:"2025-06-17T16:14:47.710Z",_path:"post/path=what-is-xinjs-"}}