When you type a value into the edit field in Stage 1, Lens applies that value to the element on the live page immediately, before you run a diagnosis. You can see what your change looks like in context without navigating anywhere or writing a line of CSS.
What you’re seeing #
The preview is applied as an Inline Style directly on the element. That puts it in the strongest possible position in the CSS Cascade, which means in most cases it will hold visually, regardless of what other rules are competing for that property. What the preview shows you is an accurate answer to “what does my value look like on this element.”
What the preview doesn’t show you is whether your value will survive when you add it through a normal CSS rule. An Inline Style applied by Lens wins almost everything. A class-based rule added to your stylesheet might not. That’s what the warning panel is for.
The warning panel #
If Lens can already tell from the captured CSS data that a normal override won’t stick, a warning panel appears the moment your value is applied. The panel names the specific source that’s blocking it: your theme, a specific plugin, your Page Builder, a JavaScript-injected style. It doesn’t say “something might override this.” It says what’s going to override it and where it came from.
When this warning appears, the preview also reverts after a short delay. This is intentional. The revert signals that the change is temporary: it looks right right now because Lens forced it, but it won’t hold when you add the rule yourself. The revert is the reminder to click Diagnose before you try to paste anything in.
The quiet confirmation #
If Lens determines the change would hold under normal CSS rules, a different panel appears: a quieter confirmation that the change looks like it would stick. The preview stays on screen. No revert.
This doesn’t mean you can skip Diagnose. The confirmation is based on the captured CSS state at the moment you clicked. New styles loaded after the capture, styles on other pages, or styles that only apply under specific conditions won’t be accounted for. Diagnose is still the path to the exact CSS that makes the change permanent.
When no determination can be made #
If the property you selected isn’t in the specificity ladder (no matched rule exists for it), Lens shows a neutral panel: “Diagnose to find out if this change will hold.” The preview stays on screen. Diagnose is the next step.
Elements with more than one match #
If the selector that matched your element also matches other elements on the same page, the preview isn’t applied. Re-location of the element is ambiguous when the selector matches more than 1 target, and Lens doesn’t risk applying the preview to the wrong element. The warning panel doesn’t appear in this case either. Click Diagnose to get the full picture.
The 10-second backstop #
If you close the popup without Lens having written a clear “revert” signal (which can happen if the popup closes unexpectedly), content.js reverts the preview after 10 seconds regardless. You won’t be left with a Lens-applied value stuck on your page.