Reports

Here's a workaround for the issue as it relates to font properties. It avoids ::part and thus !important, which @Danny'365CSI'Engelman deemed a "red flag".

Setting all of the shadow DOM <input> (the ::part element)'s CSS font properties to inherit allows me to set those properties for the custom element itself, not the ::part. If you have multiple shadow DOM elements with different font settings then this is not possible, but how often does that happen?

<template id="my-template">
  <style>
    input {
      font:inherit;
      font-kerning:inherit;
      font-size-adjust:inherit;
      font-synthesis:inherit;
      font-optical-sizing:inherit;
      font-palette:inherit;
    }
    ...

AFAICT that's all the CSS font properties that are not "experimental" or quasi-deprecated (like font-feature-settings). No more ::part or !important for fonts.

This solution might work for other non-layout properties. For example, it doesn't work for padding because it doubles the amount of padding by applying it to both the DOM and shadow DOM elements. In my case it does help auto-adjust the <input>.nextElementSibling's margin because I set that in em units which I inherit from the custom DOM element. But that's a special case with a negative margin to offset an SVG image.

79081230