{"id":46839,"date":"2026-11-09T16:26:33","date_gmt":"2026-11-09T10:56:33","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=46839"},"modified":"2026-11-09T16:27:26","modified_gmt":"2026-11-09T10:57:26","slug":"preventing-css-conflicts-in-model-driven-apps-using-shadow-dom","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/","title":{"rendered":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM"},"content":{"rendered":"<h3><img decoding=\"async\" class=\"alignnone wp-image-46844 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-scaled.png\" alt=\"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM\" width=\"2560\" height=\"1463\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-scaled.png 2560w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-300x171.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-1024x585.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-768x439.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-1536x878.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-2048x1170.png 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-660x377.png 660w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/h3>\n<h3><strong>The Blueprint: Researching PCF Best Practices Before Coding<\/strong><\/h3>\n<p>Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways.<\/p>\n<p>The requirement looked routine: a highly interactive, custom UI component for a Dynamics 365 Model-driven app, built with the Power Apps Component Framework (PCF) and the latest Fluent UI v9. Instead of coding right away, the developer researched enterprise best practices across community forums, GitHub issues and architectural blogs.<\/p>\n<p>One concept kept coming up: The <strong>Shadow DOM<\/strong>. This blog explains what it is, why it protects PCF controls from CSS conflicts, and how to make it work with Fluent UI v9, with working code.<\/p>\n<h3><strong>Key Takeaways<\/strong><\/h3>\n<ul>\n<li>Shadow DOM isolates a PCF control&#8217;s styles from Dynamics 365&#8217;s global CSS, in both directions.<\/li>\n<li>Without it, global styles can distort the control, and the control&#8217;s styles can break the native UI.<\/li>\n<li>Fluent UI v9 injects styles into the document &lt;head&gt;, so components inside a Shadow Root render unstyled.<\/li>\n<li>Using createDOMRenderer(shadowRoot) sends Fluent UI styles into the shadow root and fixes this.<\/li>\n<li>Shadow DOM adds almost no performance overhead, and mode: &#8216;open&#8217; keeps debugging easy.<\/li>\n<\/ul>\n<h3><strong>What is the Shadow DOM?<\/strong><\/h3>\n<p>Shadow DOM is a standard Web Components API that allows you to attach a hidden, separated DOM to an element. Think of it as an &#8216;invisible wall&#8217; or a quarantine zone within your HTML.<\/p>\n<p>To understand why this &#8220;invisible wall&#8221; is so crucial for PCF controls, we need to look at the exact problem it solves.<\/p>\n<h3><strong>The Problem: CSS Bleeding in Power Apps<\/strong><\/h3>\n<p>Model-driven apps are essentially massive Single-Page Applications (SPAs) loaded with hundreds of thousands of lines of global CSS.<\/p>\n<p>When you deploy a PCF control, by default, it doesn&#8217;t run in an isolated iframe (which is good for performance). Instead, it gets rendered directly into the exact same Document Object Model (DOM) as the rest of the CRM form. This lack of boundaries leads to two main issues:<\/p>\n<ol>\n<li><strong>Inward Bleeding:<\/strong> The global Dynamics 365 CSS rules target generic HTML tags (like &lt;button&gt;, &lt;table&gt;, or &lt;div&gt;). Without protection, these global styles cascade down into your PCF control, distorting your margins, fonts, and layouts.<\/li>\n<li><strong>Outward Bleeding:<\/strong> If your PCF control (or a third-party library you use) injects its own global CSS, it can leak out and accidentally override the native Dynamics 365 ribbons and form fields.<\/li>\n<\/ol>\n<p>Often, developers try to fix this by using specific CSS class names or adding the important tag to their styles. However, this approach becomes very difficult to maintain over time.<\/p>\n<p>By placing your PCF control&#8217;s HTML inside a Shadow Root, you completely eliminate this problem. Styles defined inside cannot leak out, and global CRM styles cannot penetrate in. It was exactly what I needed, but there was a catch.<\/p>\n<h3><strong>The Challenge: PCF, Shadow DOM, and Fluent UI v9<\/strong><\/h3>\n<p>Implementing Shadow DOM in vanilla HTML and JavaScript is simple. This project, however, used a React-based PCF control with Fluent UI v9, which added an architectural challenge.<\/p>\n<p>Fluent UI v9 uses a highly optimized CSS-in-JS engine. By default, it generates CSS classes dynamically and injects them into the &lt;head&gt; of the main document. Components living inside a Shadow DOM are immune to styles injected there, so Fluent UI components would render with no styling at all.<\/p>\n<p>The fix is to configure the Fluent UI v9 render er to inject its stylesheets into the Shadow Root instead of the document &lt;head&gt;. The code below shows how to achieve this isolation from day one.<\/p>\n<h3><strong>Step-by-Step Implementation Guide<\/strong><\/h3>\n<p><strong>Step 1: Initializing Shadow DOM in index.ts<\/strong><\/p>\n<p>In the PCF control&#8217;s index.ts file, we need to create a container element, attach a shadow root to it, and pass that root to our React rendering logic.<\/p>\n<pre class=\"lang:css gutter:true start:1\">import { IInputs, IOutputs } from \".\/generated\/ManifestTypes\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport * as ReactDOM from \"react-dom\";\r\n\r\nimport { App } from \".\/App\";\r\n\r\n\u00a0\r\n\r\nexport class IsolatedPCFControl implements ComponentFramework.StandardControl&lt;IInputs, IOutputs&gt; {\r\n\r\nprivate _container: HTMLDivElement;\r\n\r\nprivate _shadowRoot: ShadowRoot;\r\n\r\n\u00a0\r\n\r\npublic init(\r\n\r\ncontext: ComponentFramework.Context&lt;IInputs&gt;,\r\n\r\nnotifyOutputChanged: () =&gt; void,\r\n\r\nstate: ComponentFramework.Dictionary,\r\n\r\ncontainer: HTMLDivElement\r\n\r\n): void {\r\n\r\nthis._container = container;\r\n\r\n\u00a0\r\n\r\n\/\/ 1. Create a wrapper div\r\n\r\nconst shadowWrapper = document.createElement(\"div\");\r\n\r\nshadowWrapper.style.width = \"100%\";\r\n\r\nshadowWrapper.style.height = \"100%\";\r\n\r\n\u00a0\r\n\r\n\/\/ 2. Attach the Shadow DOM (mode: open allows us to inspect it in DevTools)\r\n\r\nthis._shadowRoot = shadowWrapper.attachShadow({ mode: \"open\" });\r\n\r\n\u00a0\r\n\r\n\/\/ 3. Append the wrapper to the main PCF container\r\n\r\nthis._container.appendChild(shadowWrapper);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\npublic updateView(context: ComponentFramework.Context&lt;IInputs&gt;): void {\r\n\r\n\/\/ Render the React app INSIDE the shadow root\r\n\r\nReactDOM.render(\r\n\r\nReact.createElement(App, {\r\n\r\ncontext: context,\r\n\r\nshadowRoot: this._shadowRoot \/\/ Pass shadowRoot as a prop!\r\n\r\n}),\r\n\r\nthis._shadowRoot as any\r\n\r\n);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\npublic destroy(): void {\r\n\r\nReactDOM.unmountComponentAtNode(this._shadowRoot as any);\r\n\r\n}\r\n\r\n}<\/pre>\n<p><strong>Step 2: Configuring the Fluent UI v9 Renderer in React<\/strong><\/p>\n<p>Now, inside the App.tsx component, we receive the shadowRoot. We must create a custom DOM render er that tells Fluent UI to insert its CSS directly into this shadow node.<\/p>\n<pre class=\"lang:css gutter:true start:1\">import * as React from \"react\";\r\n\r\nimport {\r\n\r\nFluentProvider,\r\n\r\nwebLightTheme,\r\n\r\ncreateDOMRenderer,\r\n\r\nRendererProvider,\r\n\r\nButton\r\n\r\n} from \"@fluentui\/react-components\";\r\n\r\n\u00a0\r\n\r\nexport interface IAppProps {\r\n\r\ncontext: ComponentFramework.Context&lt;any&gt;;\r\n\r\nshadowRoot: ShadowRoot;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nexport const App: React.FC&lt;IAppProps&gt; = ({ context, shadowRoot }) =&gt; {\r\n\r\n\u00a0\r\n\r\n\/\/ Create a renderer that targets our Shadow DOM instead of document.head\r\n\r\nconst renderer = React.useMemo(() =&gt; {\r\n\r\nreturn createDOMRenderer(shadowRoot);\r\n\r\n}, [shadowRoot]);\r\n\r\n\u00a0\r\n\r\nreturn (\r\n\r\n\/\/ Provide the custom renderer to the Fluent UI tree\r\n\r\n&lt;RendererProvider renderer={renderer}&gt;\r\n\r\n&lt;FluentProvider theme={webLightTheme}&gt;\r\n\r\n\u00a0\r\n\r\n&lt;div style={{ padding: '20px' }}&gt;\r\n\r\n&lt;h2&gt;Isolated PCF Control&lt;\/h2&gt;\r\n\r\n&lt;p&gt;This UI is completely protected from D365 CSS Bleeding.&lt;\/p&gt;\r\n\r\n&lt;Button appearance=\"primary\"&gt;Click Me&lt;\/Button&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n&lt;\/FluentProvider&gt;\r\n\r\n&lt;\/RendererProvider&gt;\r\n\r\n);\r\n\r\n};<\/pre>\n<p><strong>Performance and Debugging<\/strong><\/p>\n<p>Is this heavy? Not at all. Unlike the legacy approach of loading PCF controls inside an IFRAME (which initializes a whole new browser context and consumes significant memory), Shadow DOM is incredibly lightweight. The browser engine handles it natively with virtually zero performance overhead.<\/p>\n<p>To debug, simply press F12, open the Elements tab, and inspect your PCF container. You will see a #shadow-root (open) node. Expand it, and you&#8217;ll beautifully see both your HTML elements and the &lt;style&gt; tags injected specifically by Fluent UI v9 just for this control.<\/p>\n<h3><strong>Conclusion: Planning Pays Off<\/strong><\/h3>\n<p>Researching before coding spared this project a major deployment headache. As Model-driven apps evolve and Microsoft updates its base UI, fragile CSS overrides are a recipe for maintenance problems.<\/p>\n<h3><strong>Best Practice Summary for Enterprise PCF:<\/strong><\/h3>\n<ol>\n<li>Always implement Shadow DOM for complex PCF controls, especially those using external UI libraries.<\/li>\n<li>Remember to pass the ShadowRoot reference down to your styling engine (whether it&#8217;s Fluent UI v9, Material UI, or styled-components).<\/li>\n<li>Set mode: &#8216;open&#8217; during development to allow easy debugging in browser dev tools.<\/li>\n<\/ol>\n<p>Adopting this architecture ensures your custom controls remain robust, completely isolated, and visually perfect, no matter what changes occur in the surrounding Dynamics 365 environment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/\">Read More: Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM &raquo;<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2576,3357,2361],"tags":[3451],"class_list":["post-46839","post","type-post","status-publish","format-standard","hentry","category-model-driven-app","category-pcf-control","category-technical","tag-css-conflicts"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The\" \/>\n\t<meta name=\"robots\" content=\"max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n\t<meta name=\"author\" content=\"Sam Kumar\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Microsoft Dynamics 365 CRM Tips and Tricks - By Inogic\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks\" \/>\n\t\t<meta property=\"og:description\" content=\"The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-scaled.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-scaled.png\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-11-09T10:56:33+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-11-09T10:57:26+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inogicindia\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@inogic\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks\" \/>\n\t\t<meta name=\"twitter:description\" content=\"The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@inogic\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-scaled.png\" \/>\n\t\t<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t\t<meta name=\"twitter:data1\" content=\"Sam Kumar\" \/>\n\t\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#blogposting\",\"name\":\"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks\",\"headline\":\"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM\",\"author\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/author\\\/sam-kumar\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1.png\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#articleImage\"},\"datePublished\":\"2026-11-09T16:26:33+05:30\",\"dateModified\":\"2026-11-09T16:27:26+05:30\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#webpage\"},\"articleSection\":\"Model Driven App, PCF Control, Technical, CSS Conflicts\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/category\\\/technical\\\/#listItem\",\"name\":\"Technical\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/category\\\/technical\\\/#listItem\",\"position\":2,\"name\":\"Technical\",\"item\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/category\\\/technical\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#listItem\",\"name\":\"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#listItem\",\"position\":3,\"name\":\"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/category\\\/technical\\\/#listItem\",\"name\":\"Technical\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/#organization\",\"name\":\"Microsoft Dynamics 365 CRM Tips and Tricks\",\"description\":\"By Inogic\",\"url\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/inogic-logo.png\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#organizationLogo\",\"width\":1000,\"height\":325,\"caption\":\"inogic logo\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inogicindia\",\"https:\\\/\\\/twitter.com\\\/inogic\",\"https:\\\/\\\/www.instagram.com\\\/inogicindia\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCM4V7ousgLSu1hbOEv4DUuQ\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inogicindia\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/author\\\/sam-kumar\\\/#author\",\"url\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/author\\\/sam-kumar\\\/\",\"name\":\"Sam Kumar\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ede4386d06665d3d5ee2ecccb6c36df60385d561e317372bd89dffb7e4b1de2f?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Sam Kumar\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#webpage\",\"url\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/\",\"name\":\"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks\",\"description\":\"The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/2026\\\/11\\\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/author\\\/sam-kumar\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/author\\\/sam-kumar\\\/#author\"},\"datePublished\":\"2026-11-09T16:26:33+05:30\",\"dateModified\":\"2026-11-09T16:27:26+05:30\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/\",\"name\":\"Microsoft Dynamics 365 CRM Tips and Tricks\",\"alternateName\":\"Inogic\",\"description\":\"By Inogic\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inogic.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks","description":"The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The","canonical_url":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/","robots":"max-snippet:-1, max-image-preview:large, max-video-preview:-1","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#blogposting","name":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks","headline":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM","author":{"@id":"https:\/\/www.inogic.com\/blog\/author\/sam-kumar\/#author"},"publisher":{"@id":"https:\/\/www.inogic.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1.png","@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#articleImage"},"datePublished":"2026-11-09T16:26:33+05:30","dateModified":"2026-11-09T16:27:26+05:30","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#webpage"},"isPartOf":{"@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#webpage"},"articleSection":"Model Driven App, PCF Control, Technical, CSS Conflicts"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.inogic.com\/blog\/#listItem","position":1,"name":"Home","item":"https:\/\/www.inogic.com\/blog\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.inogic.com\/blog\/category\/technical\/#listItem","name":"Technical"}},{"@type":"ListItem","@id":"https:\/\/www.inogic.com\/blog\/category\/technical\/#listItem","position":2,"name":"Technical","item":"https:\/\/www.inogic.com\/blog\/category\/technical\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#listItem","name":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.inogic.com\/blog\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#listItem","position":3,"name":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM","previousItem":{"@type":"ListItem","@id":"https:\/\/www.inogic.com\/blog\/category\/technical\/#listItem","name":"Technical"}}]},{"@type":"Organization","@id":"https:\/\/www.inogic.com\/blog\/#organization","name":"Microsoft Dynamics 365 CRM Tips and Tricks","description":"By Inogic","url":"https:\/\/www.inogic.com\/blog\/","logo":{"@type":"ImageObject","url":"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/inogic-logo.png","@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#organizationLogo","width":1000,"height":325,"caption":"inogic logo"},"image":{"@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#organizationLogo"},"sameAs":["https:\/\/www.facebook.com\/inogicindia","https:\/\/twitter.com\/inogic","https:\/\/www.instagram.com\/inogicindia\/","https:\/\/www.youtube.com\/channel\/UCM4V7ousgLSu1hbOEv4DUuQ","https:\/\/www.linkedin.com\/company\/inogicindia"]},{"@type":"Person","@id":"https:\/\/www.inogic.com\/blog\/author\/sam-kumar\/#author","url":"https:\/\/www.inogic.com\/blog\/author\/sam-kumar\/","name":"Sam Kumar","image":{"@type":"ImageObject","@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/ede4386d06665d3d5ee2ecccb6c36df60385d561e317372bd89dffb7e4b1de2f?s=96&d=mm&r=g","width":96,"height":96,"caption":"Sam Kumar"}},{"@type":"WebPage","@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#webpage","url":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/","name":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks","description":"The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.inogic.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/#breadcrumblist"},"author":{"@id":"https:\/\/www.inogic.com\/blog\/author\/sam-kumar\/#author"},"creator":{"@id":"https:\/\/www.inogic.com\/blog\/author\/sam-kumar\/#author"},"datePublished":"2026-11-09T16:26:33+05:30","dateModified":"2026-11-09T16:27:26+05:30"},{"@type":"WebSite","@id":"https:\/\/www.inogic.com\/blog\/#website","url":"https:\/\/www.inogic.com\/blog\/","name":"Microsoft Dynamics 365 CRM Tips and Tricks","alternateName":"Inogic","description":"By Inogic","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.inogic.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Microsoft Dynamics 365 CRM Tips and Tricks - By Inogic","og:type":"article","og:title":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks","og:description":"The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The","og:url":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/","og:image":"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-scaled.png","og:image:secure_url":"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-scaled.png","article:published_time":"2026-11-09T10:56:33+00:00","article:modified_time":"2026-11-09T10:57:26+00:00","article:publisher":"https:\/\/www.facebook.com\/inogicindia","twitter:card":"summary_large_image","twitter:site":"@inogic","twitter:title":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM - Microsoft Dynamics 365 CRM Tips and Tricks","twitter:description":"The Blueprint: Researching PCF Best Practices Before Coding Every PCF developer knows the urge: run pac pcf init and start coding. One developer building a Fluent UI v9 component for a Model-driven app resisted it, and that choice avoided a problem that usually shows up only after deployment: CSS that breaks in unpredictable ways. The","twitter:creator":"@inogic","twitter:image":"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/11\/Preventing-CSS-Conflicts-in-Model-Driven-Apps-using-Shadow-DOM-1-scaled.png","twitter:label1":"Written by","twitter:data1":"Sam Kumar","twitter:label2":"Est. reading time","twitter:data2":"6 minutes"},"aioseo_meta_data":{"post_id":"46839","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"PCF","score":0,"analysis":[]},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":true,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-11-09 09:23:55","updated":"2026-11-09 10:57:26","seo_analyzer_scan_date":null,"focus_keyword":"PCF","additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.inogic.com\/blog\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.inogic.com\/blog\/category\/technical\/\" title=\"Technical\">Technical<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tPreventing CSS Conflicts in Model-Driven Apps using Shadow DOM\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.inogic.com\/blog\/"},{"label":"Technical","link":"https:\/\/www.inogic.com\/blog\/category\/technical\/"},{"label":"Preventing CSS Conflicts in Model-Driven Apps using Shadow DOM","link":"https:\/\/www.inogic.com\/blog\/2026\/11\/preventing-css-conflicts-in-model-driven-apps-using-shadow-dom\/"}],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/46839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=46839"}],"version-history":[{"count":5,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/46839\/revisions"}],"predecessor-version":[{"id":46846,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/46839\/revisions\/46846"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=46839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=46839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=46839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}