{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-5-1-web-components-support/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 5.1: Web components support\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2021-04-01\",\n  \"type\": [\"announcement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Polypane 5.1 introduces support for web components across the application, many improvements to the Outline panel and Contrast checker. There an updates to the Chromium version, Google fonts list and accessibility ruleset.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"web-component-support\"\n  }, `Web component support`), mdx(\"p\", null, `Polypane now has support for web components throughout the application: you can reach into them with the element inspector, inspect and edit them in the Elements panel and all the outline panel lists like headings, links and focus order support web components too.`), mdx(\"p\", null, `Because web components are basically engineered to be as isolated from the rest of the page this was quite a lot of work, but it's an important part of the modern web.`), mdx(\"video\", {\n    src: \"/blogs/polypane-5-1/webcomponents.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }, \"Video showing the elements panel inspecting and editing inside web components\"), mdx(\"h2\", {\n    \"id\": \"outline-panel-updates\"\n  }, `Outline panel updates`), mdx(\"p\", null, `As mentioned, all overviews now support web components, so you might see a different list compared to Polypane 5 if you use web components.`), mdx(\"p\", null, `The outline panel Heading overview has additional warnings for a missing `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `h1`), ` element and empty, hidden or presentational headings are badged for context.`), mdx(\"p\", null, `The Links checker now supports links that are missing a protocol (starting a link with `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `//`), ` uses the same protocol as the current page) or contain `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `./`), ` somewhere in the url.`), mdx(\"h2\", {\n    \"id\": \"contrast-checker-updates\"\n  }, `Contrast checker updates`), mdx(\"p\", null, `The contrast checker debug tool has been updated to provide less false positives (where the calculated contrast ratio shows as 1) and labels now stick to elements if they're fixed or sticky.`), mdx(\"h2\", {\n    \"id\": \"new-performance-options-and-notification\"\n  }, `New performance options and notification`), mdx(\"p\", null, `Polypane now warns you if your site has an excessive amount of CSS. We defined that at 10.000 unique rule sets (a rule set is a css selector and all its properties together). At 10K unique rule sets/selectors, Polypane has to do a lot of work in parsing all the CSS to provide the features we do. In the future we might disable certain features in Polypane to keep everything performant.`), mdx(\"p\", null, `The performance options now have a clear all button to quickly reset all options, and a \"keep in first pane\" option so you can disable resource intensive features across panes but keep them visible in one of them.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-51\"\n  }, `Get Polypane 5.1`), mdx(\"p\", null, `Polypane updates automatically on both Mac and Windows. Linux users need to download the new version from\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), `.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a free 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register/\"\n  }), `Get it here`), `.`)), mdx(\"h2\", {\n    \"id\": \"full-changelog\"\n  }, `Full changelog`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Full support for Web components in Element inspector`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Full support for Web components in Outline panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Performance warning for sites with 10K+ CSS selectors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Added CSS Stacking Context devtools extension`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Inspect element in Chromium devtools from the Elements panel (Thanks Roel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Heading overview gives warnings for empty, hidden and presentational headings`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Heading overview gives warning if there is no h1 on the page`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Performance options have a reset button and a \"keep in first pane\" option`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` More performant scroll sync for sites with smooth scrolling enabled`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Contrast checker shows less false positives`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Contrast checker labels stick to fixed elements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Chromium to 89.0.4389.90`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Breakpoint panels warning limit changed from 16 to 20`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Google Fonts list`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Links panel can now check links with \"./\" in them`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Links panel can now check links without a protocol`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Facebook preview rendering improved for sites without og:image`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Twitter preview rendering improved for sites without twitter:image`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Keyboard focus styling across the app`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated accessibility panel ruleset`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Errors messages consistency in the Meta panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Tab order in Pane header`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Reference image now takes visible rulers into account`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Polypane console panel now uses same fonts as devtools console (Thanks Lars!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Reloading devtools extensions now always forces a redownload`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Automatically open Chromium devtools when switching to the devtools panel and there is just one pane`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Prevent caret from changing position when editing style and attributes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Move Twitter preview to the top of the Social previews`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Added support for clamp() in style editor`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Node tooltip rendering consistency`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Icon and tab alignment in the header`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rendering of inspect button right click menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rename Header overview to Heading overview (Thanks Roel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel now shows doctype`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Address bar can no longer get cleared when you're typing in it.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Context menu now has copy option for selected text`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Installed devtools extensions on Windows sometimes caused app not to load (Thanks Michael!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Crash when console popup couldn't be rendered (Thanks Fabio!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Context menu in Chromium devtools was not visible`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Many typos (Thanks Roel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Full layout on Mac and Windows showed white bar at the bottom (Thanks Bjoern!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Display DOM tree for pages without a doctype`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` 1px overlap of buttons in menus causing flickering (Thanks Niels!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Flyout menus on windows were broken (Thanks Warren!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Error when loading Polypane with layout debugging active (Thanks Sam!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Deleting attributes from elements panel didn't work`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Updating numbers in a calc() sometimes resulted in NaN`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Tota11y is no longer loaded twice after navigation in SPA's`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Overview screenshot sometimes generated empty image (Thanks Darius!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Reference image no longer renders behind website`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` issue where reload in subframes caused main URL to update`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"tableOfContents":{"items":[{"url":"#web-component-support","title":"Web component support"},{"url":"#outline-panel-updates","title":"Outline panel updates"},{"url":"#contrast-checker-updates","title":"Contrast checker updates"},{"url":"#new-performance-options-and-notification","title":"New performance options and notification"},{"url":"#get-polypane-51","title":"Get Polypane 5.1"},{"url":"#full-changelog","title":"Full changelog"}]},"excerpt":"Polypane 5.1 introduces support for web components across the application, many improvements to the Outline panel and Contrast checker. There an updates to the…","frontmatter":{"title":"Polypane 5.1: Web components support","cover":"/img/mail/icon.svg","date":"2021-04-01","updated":null},"fields":{"slug":"/blog/polypane-5-1-web-components-support/","date":"2021-03-31T22:00:00.000Z","ogFileName":"polypane-5-1-web-components-support"}}},"pageContext":{"slug":"/blog/polypane-5-1-web-components-support/"}},"staticQueryHashes":["4164364741","425175329"]}