LightDom Lit Element - paulmaclean/datatables.webcomponent GitHub Wiki

By setting the renderRoot static property to 'light-dom' before defining the component, you can render the children into the main element, disabling the shadow dom rendering. This allows for global styles to affect the component. Warning: The styles in the component will also "leak" out into your global scope.

Example View in Browser 

//index.ts
import {DataTable, defineComponent} from "@p_mac/datatables.webcomponent"
DataTable.renderRoot = 'light-dom';

defineComponent(DataTable.componentName, DataTable, 'example');
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Light Dom Example</title>
</head>
<body>
    <h2>Example Usage using Light Dom</h2>
    <style>
        table, input, select {
            background-color: lavender;
        }

        example-data-table .pure-form select {
            background-color: lavender;
            color: #000;
        }

        example-data-table .pure-button {
            background-color: mediumorchid;
            color: #fff;
        }

        example-data-table .pure-table thead {
            background-color: mediumpurple;
            color: #fff;
        }
    </style>
    <example-data-table
        data-ajax='{"url": "https://unpkg.com/@p_mac/datatables.webcomponent/test/support/data/generated.json"}'
        data-filterable='{"colIndexes":[5]}'
        data-summable='{"colIndexes":[2]}'
    >
    </example-data-table>
    <script src="./dist/index.js"></script>
</body>
</html>

See lit-element usage for sample webpack config

⚠️ **GitHub.com Fallback** ⚠️