::part pseudo-element support #2016
Description
Is your feature request related to a problem? Please describe.
Standard lightning components customization
Describe the solution you'd like
Currently, there is no way to customize the standard lightning components (since they are wrapped by the salesforce synthetic shadow dom). This makes it difficult to deliver a different UI experience to salesforce community users since we use SLDS (basically every community will look kind the same in terms of inputs, tables, and any other component under the lightning namespace).
in order to solve this problem, it would be really beneficial if the ::part pseudo-element is supported by LWC.
the ::part pseudo-element allows applying CSS rules to elements contained in the shadow dom, and it is well supported by major browsers (only IE does not support it, but I as far as know Salesforce will completely drop support for IE next year so it will be fine if that vendor does not support it).
Describe alternatives you've considered
In order to deliver a new UI experience, I have developed a small set of input components implementing the Material design system. The problem of this approach is that I had to support all attributes and methods that lightning inputs support and made them accessible (which it is still in progress).
this process takes too much time and if we later want to deliver a different design system, we will need to go over the same process probably.
if the ::part pseudo-element is supported, we can simply tweak some CSS rules in order to customize the standard inputs (which means that developers now get attributes, methods, and accessibility for free).
Additional context
In order to prove my point I have developed a small demo using the standard web components:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/design-system/2.12.1/styles/salesforce-lightning-design-system.min.css" integrity="sha512-8D7ZvYSNO61z6Hu82tZgOfL/c5jbXP5bEnEPKtA9CjuWzctJvKIJW5FiFRxGFdiRLeaMIxLxTlgvpgosmIXs5A==" crossorigin="anonymous" />
</head>
<body>
<div class="slds-p-around_small">
<!-- customized -->
<lightning-input class="outline"></lightning-input>
<!-- standard --->
<lightning-input></lightning-input>
</div>
</body>
</html>html {
background: white;
}
lightning-input.outline::part(container) {
background-color: #edf2f7;
border-radius: .25rem;
border-color: #a0aec0;
}
lightning-input.outline::part(label) {
padding: 0;
margin:0;
}
lightning-input.outline::part(text-field) {
border: none;
border-radius: 0;
background: transparent;
border-bottom: 1px solid black;
min-height: 1.2rem !important;
line-height: normal;
}
lightning-input.outline::part(text-field):focus {
outline: none;
box-shadow:none;
border-color: #667eea;
box-shadow: 0 5px 6px -6px #667eea;
}const template = document.createElement('template');
template.innerHTML = `
<style>
/*importing the whole slds library for demo purposes*/
@import "https://cdnjs.cloudflare.com/ajax/libs/design-system/2.12.1/styles/salesforce-lightning-design-system.min.css";
</style>
<div class="slds-form-element" part="container">
<label class="slds-form-element__label" for="text-input-id-1" part="label">
<abbr class="slds-required" title="required">* </abbr>Input Label</label>
<div class="slds-form-element__control">
<input
type="text"
id="text-input-id-1"
autocomplete="off"
class="slds-input"
part="text-field"
/>
</div>
</div>
`;
class LightningInput extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('lightning-input', LightningInput);output
